diff --git a/.github/workflows/build-sponsored.yml b/.github/workflows/build-sponsored.yml
index b5e96f56..fb05aed3 100644
--- a/.github/workflows/build-sponsored.yml
+++ b/.github/workflows/build-sponsored.yml
@@ -76,5 +76,3 @@ jobs:
             dist/*.snap
           if-no-files-found: warn
           retention-days: 30
-
-
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 6346cf28..906319cc 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -118,5 +118,3 @@ jobs:
           append_body: true
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4938e225..e6cd0c75 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -31,4 +31,4 @@ fix #123
 
 It's ok to have multiple commits in a single PR, you don't need to rebase or force push for your changes as we will use Squash and Merge to squash the commits into one commit when merging.
 
-And of course please test your code before PR. 
\ No newline at end of file
+And of course please test your code before PR.
diff --git a/README.md b/README.md
index a884767d..1154205f 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ A free, open-source developer workspace.
 </p>
 
 <p align="center">
-  <strong>Snippets, notes, calculations, and dev tools in one local-first app.</strong>
+  <strong>Snippets, notes, HTTP requests, calculations, and dev tools in one local-first app.</strong>
   <br>
   Your data stays on your machine as plain Markdown files.
 </p>
@@ -75,7 +75,7 @@ massCode is free and open source. But building and maintaining a quality tool ta
 
 ## About
 
-Originally a snippet manager, massCode now brings together snippets, notes, calculations, and developer tools in one desktop app, so everyday work stays in one place.
+Originally a snippet manager, massCode now brings together snippets, notes, HTTP requests, calculations, and developer tools in one desktop app, so everyday work stays in one place.
 
 ## Features
 
@@ -101,6 +101,17 @@ Write longer markdown documents right next to your snippets: project docs, draft
 - Fullscreen presentation mode for demos and meetings
 - Callout blocks and image embedding
 
+### HTTP Client
+
+Keep API requests close to your code snippets and project notes with a lightweight HTTP client built into massCode.
+
+- Organize requests with folders and custom folder icons
+- Use environments and `{{variables}}` for local, staging, and production APIs
+- Edit params, headers, body, auth, and markdown descriptions
+- Preview requests as raw HTTP or cURL before sending
+- Inspect response status, time, size, body, and headers
+- Send the current request with <kbd>Cmd+Enter</kbd> on macOS or <kbd>Ctrl+Enter</kbd> on Windows and Linux
+
 ### Math Notebook
 
 A calculator-style notebook for natural-language calculations, conversions, and date math without leaving your workflow.
@@ -122,7 +133,7 @@ Built-in utilities for the small tasks that usually send you to a browser tab:
 
 ## Markdown Vault
 
-Your snippets and notes live as plain `.md` files on disk with frontmatter metadata, so the data stays readable and portable.
+Your snippets, notes, and HTTP requests live as plain `.md` files on disk with frontmatter metadata, so the data stays readable and portable.
 
 - **Git-friendly** - track changes and sync via any Git remote
 - **Cloud sync** - works with iCloud, Dropbox, Google Drive, Syncthing
diff --git a/docs/website/.vitepress/_data/assets.json b/docs/website/.vitepress/_data/assets.json
index ddec68cb..2bf3d384 100644
--- a/docs/website/.vitepress/_data/assets.json
+++ b/docs/website/.vitepress/_data/assets.json
@@ -5,4 +5,4 @@
   "win": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1-x64.exe",
   "winPortable": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1-x64-portable.exe",
   "linux": "https://github.com/massCodeIO/massCode/releases/download/v4.7.1/massCode-4.7.1.AppImage"
-}
\ No newline at end of file
+}
diff --git a/docs/website/.vitepress/config.mts b/docs/website/.vitepress/config.mts
index 71d90e58..8f808fb3 100644
--- a/docs/website/.vitepress/config.mts
+++ b/docs/website/.vitepress/config.mts
@@ -132,6 +132,14 @@ export default defineConfig({
             { text: 'Search', link: '/documentation/notes/search' },
           ],
         },
+        {
+          text: 'HTTP',
+          items: [
+            { text: 'HTTP Client', link: '/documentation/http/' },
+            { text: 'Requests', link: '/documentation/http/requests' },
+            { text: 'Environments', link: '/documentation/http/environments' },
+          ],
+        },
         {
           text: 'Math',
           items: [
diff --git a/docs/website/documentation/http/environments.md b/docs/website/documentation/http/environments.md
new file mode 100644
index 00000000..abdcb99a
--- /dev/null
+++ b/docs/website/documentation/http/environments.md
@@ -0,0 +1,49 @@
+---
+title: HTTP Environments
+description: "Use HTTP environments in massCode to manage reusable variables for local, staging, and production API requests."
+---
+
+# Environments
+
+Environments store reusable variables for requests. Use them for values that change between local, staging, and production APIs, such as base URLs, user IDs, organization IDs, and tokens.
+
+<img :src="withBase('/http-envs.png')">
+
+## Variables
+
+Use variables with double braces:
+
+```text
+{{apiUrl}}/v1/users/{{userId}}/sessions
+```
+
+The URL field keeps variables visible while you edit. Preview and request execution resolve variables from the active environment.
+
+Variables can be used in:
+
+- URL
+- params
+- headers
+- body
+- auth fields
+
+## Active Environment
+
+Use the **Environments** panel below folders to choose the active environment.
+
+Select **No environment** when you want requests to keep variables unresolved. This is useful when you are editing templates or copying a request without applying local values.
+
+## Managing Environments
+
+Open **Manage** from the Environments panel to create environments and edit variables.
+
+Each environment has:
+
+- a name
+- a key-value table of variables
+
+The active environment is stored as part of the HTTP space state.
+
+<script setup>
+import { withBase } from 'vitepress'
+</script>
diff --git a/docs/website/documentation/http/index.md b/docs/website/documentation/http/index.md
new file mode 100644
index 00000000..c60e6b23
--- /dev/null
+++ b/docs/website/documentation/http/index.md
@@ -0,0 +1,46 @@
+---
+title: HTTP Client
+description: "Use the HTTP space in massCode as a lightweight local-first API client for saved requests, environments, previews, and responses."
+---
+
+# HTTP Client
+
+<AppVersion text=">=5.3" />
+
+HTTP is the API client space inside massCode. Use it to keep reusable requests next to your snippets and notes, test endpoints during development, and store small API collections in your local vault.
+
+Access HTTP from the **HTTP** icon in the Space rail. The layout follows the same workspace pattern as Code and Notes: folders on the left, requests in the middle, and the request editor with preview and response panels on the right.
+
+<img :src="withBase('/http.png')">
+
+## When to use HTTP
+
+Use HTTP when you want a lightweight request client without leaving massCode.
+
+- test local or remote API endpoints
+- save repeatable requests by project or service
+- keep request descriptions close to implementation notes
+- switch variables between local, staging, and production environments
+- copy a request as raw HTTP or cURL for debugging and sharing
+
+## Main Concepts
+
+### [Requests](/documentation/http/requests)
+
+Requests store the method, URL, params, headers, body, auth settings, and markdown description for an API call. The editor autosaves changes, shows an outgoing request preview, and sends the selected request with <kbd>Cmd+Enter</kbd> on macOS or <kbd>Ctrl+Enter</kbd> on Windows or Linux.
+
+### [Environments](/documentation/http/environments)
+
+Environments store reusable variables for local, staging, and production APIs. The URL field keeps variables visible while you edit, while preview and request execution resolve values from the active environment.
+
+## Folders
+
+HTTP requests are organized in folders. Selecting a folder shows its requests and selects the first request in that folder. Folders support nesting, drag and drop ordering, inline rename, and custom folder icons.
+
+## Storage
+
+HTTP data is stored in your vault under the `http` folder. Requests are markdown files with YAML frontmatter, so they can be backed up and synced together with the rest of your massCode data.
+
+<script setup>
+import { withBase } from 'vitepress'
+</script>
diff --git a/docs/website/documentation/http/requests.md b/docs/website/documentation/http/requests.md
new file mode 100644
index 00000000..520bab9e
--- /dev/null
+++ b/docs/website/documentation/http/requests.md
@@ -0,0 +1,68 @@
+---
+title: HTTP Requests
+description: "Create, edit, preview, send, duplicate, and inspect HTTP requests in the massCode HTTP space."
+---
+
+# Requests
+
+Requests are the main items in the HTTP space. Each request stores the method, URL, params, headers, body, auth settings, and a markdown description.
+
+## Creating Requests
+
+Create a request from the request list header or from a folder context menu. New requests are created in the selected folder.
+
+Request context menus include actions for:
+
+- duplicate
+- delete
+- copy request preview
+- copy internal link
+- reveal in file manager
+
+## Request Editor
+
+The request editor is split into focused tabs:
+
+- **Params** - query parameters sent with the URL
+- **Headers** - request headers
+- **Body** - JSON, text, form URL encoded, or multipart form data
+- **Auth** - none, bearer token, or basic auth
+- **Description** - markdown notes for the request
+
+Changes are saved automatically while you edit.
+
+## Body
+
+Use the body tab to choose the payload format for methods that send data.
+
+- **JSON** and **Text** use a CodeMirror editor.
+- **Form URL Encoded** uses key-value rows.
+- **Multipart Form Data** supports text and file rows.
+
+## Sending Requests
+
+Send the selected request with one of these methods:
+
+- Click the send button next to the URL field.
+- Select **"Editor"** > **"Send Request"** from the menu bar.
+- Press <kbd>Cmd+Enter</kbd> on macOS or <kbd>Ctrl+Enter</kbd> on Windows or Linux.
+
+## Preview
+
+The lower panel can show the outgoing request before it is sent.
+
+- **HTTP** preview shows the request line, host, headers, and body.
+- **cURL** preview builds a command you can paste into a terminal.
+
+Use the copy button in the preview panel to copy the active preview.
+
+## Response Viewer
+
+After a request is sent, the response panel shows:
+
+- status, duration, and response size
+- body and headers tabs
+- JSON formatting for JSON responses
+- copy action for response body and headers
+
+HTTP has its own editor preferences, including line wrapping for request previews, request bodies, and response viewers.
diff --git a/docs/website/documentation/index.md b/docs/website/documentation/index.md
index b1eb9c03..5c5b49fc 100644
--- a/docs/website/documentation/index.md
+++ b/docs/website/documentation/index.md
@@ -1,11 +1,11 @@
 ---
 title: Documentation Overview
-description: "Explore the massCode documentation for code snippets, markdown notes, math notebook, storage, sync, themes, JSON Diff, and built-in developer tools."
+description: "Explore the massCode documentation for code snippets, markdown notes, HTTP requests, math notebook, storage, sync, themes, JSON Diff, and built-in developer tools."
 ---
 
 # Overview
 
-massCode is a free and open source developer workspace for code snippets, markdown notes, calculations, and quick developer utilities. Instead of scattering everyday work across an editor, a notes app, a calculator, and a handful of websites, you keep it in four focused Spaces inside one local-first desktop app.
+massCode is a free and open source developer workspace for code snippets, markdown notes, HTTP requests, calculations, and quick developer utilities. Instead of scattering everyday work across an editor, a notes app, an HTTP client, a calculator, and a handful of websites, you keep it in focused Spaces inside one local-first desktop app.
 
 Switch between Spaces using the rail on the left side of the app.
 
@@ -19,6 +19,10 @@ Use Code to build a reusable snippet library across projects and languages. The
 
 Use Notes for longer markdown documents that do not fit well into snippets: project notes, drafts, technical docs, meeting notes, and personal knowledge bases. It uses the same three-column layout as Code and adds a Notes Dashboard, live preview, a notes graph, mindmaps, and fullscreen presentation mode.
 
+## HTTP
+
+Use HTTP as a lightweight API client inside massCode. Store requests in folders, switch environments, preview the outgoing request as raw HTTP or cURL, send it from the editor, and inspect the response body and headers without leaving your workspace.
+
 ## Math
 
 Math is a calculator-style notebook for quick development math without leaving massCode. Use it for currency conversion, unit conversion, date math, finance, and natural-language calculations with instant results on every line.
diff --git a/docs/website/documentation/notes/internal-links.md b/docs/website/documentation/notes/internal-links.md
index 391079eb..f9568756 100644
--- a/docs/website/documentation/notes/internal-links.md
+++ b/docs/website/documentation/notes/internal-links.md
@@ -1,13 +1,13 @@
 ---
 title: Internal Links
-description: "Link notes and snippets together inside massCode Notes with wiki-style links, hover previews, and back-forward navigation."
+description: "Link notes, snippets, and HTTP requests together inside massCode Notes with wiki-style links, hover previews, and back-forward navigation."
 ---
 
 # Internal Links
 
-<AppVersion text=">=5.1.0" />
+<AppVersion text=">=5.1" />
 
-Internal Links let you connect notes and snippets with wiki-style links directly inside Notes. Use them to build lightweight documentation, link reference snippets from prose, and move through related material without leaving massCode.
+Internal Links let you connect notes, snippets, and HTTP requests with wiki-style links directly inside Notes. Use them to build lightweight documentation, link reference snippets or saved API requests from prose, and move through related material without leaving massCode.
 
 <img :src="withBase('/notes-internal-links.png')">
 
@@ -27,7 +27,7 @@ You can also provide custom visible text with an alias:
 [[Fetch helper|request snippet]]
 ```
 
-massCode resolves internal links by item name. A target can be either a note or a snippet.
+massCode resolves internal links by item name. A target can be a note, a snippet, or an HTTP request.
 
 If two notes share the same name, qualify the link with a folder path:
 
@@ -40,7 +40,7 @@ If two notes share the same name, qualify the link with a folder path:
 
 Start typing `[[` in the Notes editor to open the internal links picker.
 
-- The picker searches both notes and snippets.
+- The picker searches notes, snippets, and HTTP requests.
 - Results show the item name and its current location.
 - Press <kbd>Enter</kbd> to insert the active result.
 - Use the arrow keys to move through the list.
@@ -53,6 +53,7 @@ Hold <kbd>Cmd</kbd> on macOS or <kbd>Ctrl</kbd> on Windows or Linux, then click
 
 - If the target is a note, massCode opens it in Notes.
 - If the target is a snippet, massCode switches to Code and opens the snippet there.
+- If the target is an HTTP request, massCode switches to HTTP and opens the request there.
 
 Broken links stay visible, but they appear dimmed and struck through so you can spot missing targets.
 
@@ -62,6 +63,7 @@ Hover an internal link while holding <kbd>Cmd</kbd> on macOS or <kbd>Ctrl</kbd>
 
 - Note links show a text excerpt.
 - Snippet links show the first snippet fragment.
+- HTTP request links show the method, URL, and description.
 
 This helps you confirm the target before you navigate away from the current note.
 
@@ -78,9 +80,10 @@ The history is specific to internal-link navigation. If you manually select anot
 ## When to Use Internal Links
 
 - Link architecture notes to implementation snippets
+- Link API docs to saved HTTP requests
 - Connect meeting notes to reference code
-- Build personal knowledge-base pages that jump between notes and snippets
-- Keep long-form docs in Notes while linking reusable code examples from Code
+- Build personal knowledge-base pages that jump between notes, snippets, and requests
+- Keep long-form docs in Notes while linking reusable code examples from Code and API checks from HTTP
 
 <script setup>
 import { withBase } from 'vitepress'
diff --git a/docs/website/public/http-envs.png b/docs/website/public/http-envs.png
new file mode 100644
index 00000000..34ee5a86
Binary files /dev/null and b/docs/website/public/http-envs.png differ
diff --git a/docs/website/public/http.png b/docs/website/public/http.png
new file mode 100644
index 00000000..5dfee77d
Binary files /dev/null and b/docs/website/public/http.png differ
diff --git a/docs/website/scripts/align-arrows.mjs b/docs/website/scripts/align-arrows.mjs
index 1f8cdb11..7eda4b61 100644
--- a/docs/website/scripts/align-arrows.mjs
+++ b/docs/website/scripts/align-arrows.mjs
@@ -8,7 +8,8 @@ let inBlock = false
 let block = []
 
 function flushBlock() {
-  if (block.length === 0) return
+  if (block.length === 0)
+    return
   // Find lines with →
   const arrowLines = block.filter(l => l.includes('→'))
   if (arrowLines.length === 0) {
@@ -21,7 +22,8 @@ function flushBlock() {
   for (const line of arrowLines) {
     const idx = line.indexOf('→')
     const left = line.substring(0, idx).trimEnd()
-    if (left.length > maxLeft) maxLeft = left.length
+    if (left.length > maxLeft)
+      maxLeft = left.length
   }
   const col = maxLeft + 4 // 4 spaces before →
   for (const line of block) {
@@ -29,9 +31,10 @@ function flushBlock() {
       const idx = line.indexOf('→')
       const left = line.substring(0, idx).trimEnd()
       const right = line.substring(idx + 1).trimStart()
-      const padded = left.padEnd(col) + '→ ' + right
+      const padded = `${left.padEnd(col)}→ ${right}`
       result.push(padded)
-    } else {
+    }
+    else {
       result.push(line)
     }
   }
@@ -42,13 +45,16 @@ for (const line of lines) {
   if (line.startsWith('```') && !inBlock) {
     inBlock = true
     result.push(line)
-  } else if (line.startsWith('```') && inBlock) {
+  }
+  else if (line.startsWith('```') && inBlock) {
     flushBlock()
     inBlock = false
     result.push(line)
-  } else if (inBlock) {
+  }
+  else if (inBlock) {
     block.push(line)
-  } else {
+  }
+  else {
     result.push(line)
   }
 }
diff --git a/package.json b/package.json
index 10140a69..45479d42 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,13 @@
     "prepare": "simple-git-hooks && npm run rebuild"
   },
   "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-json": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
     "@codemirror/language": "^6.12.2",
     "@codemirror/language-data": "^6.5.2",
+    "@codemirror/legacy-modes": "^6.5.2",
     "@codemirror/state": "^6.6.0",
     "@codemirror/view": "^6.40.0",
     "@dagrejs/dagre": "^1.1.5",
@@ -109,6 +111,7 @@
     "tailwind-merge": "^3.0.2",
     "toml": "^3.0.0",
     "typed.js": "^2.1.0",
+    "undici": "^6.21.2",
     "uuid": "^11.1.0",
     "vue-sonner": "^1.3.0",
     "vue-virtual-scroller": "2.0.0-beta.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f28b82bc..a4ddaeb7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.20.1
+        version: 6.20.1
       '@codemirror/commands':
         specifier: ^6.10.3
         version: 6.10.3
@@ -23,6 +26,9 @@ importers:
       '@codemirror/language-data':
         specifier: ^6.5.2
         version: 6.5.2
+      '@codemirror/legacy-modes':
+        specifier: ^6.5.2
+        version: 6.5.2
       '@codemirror/state':
         specifier: ^6.6.0
         version: 6.6.0
@@ -191,6 +197,9 @@ importers:
       typed.js:
         specifier: ^2.1.0
         version: 2.1.0
+      undici:
+        specifier: ^6.21.2
+        version: 6.21.2
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
diff --git a/src/main/api/dto/http-environments.ts b/src/main/api/dto/http-environments.ts
new file mode 100644
index 00000000..5253d21b
--- /dev/null
+++ b/src/main/api/dto/http-environments.ts
@@ -0,0 +1,44 @@
+import Elysia, { t } from 'elysia'
+
+const httpEnvironmentVariables = t.Record(t.String(), t.String())
+
+const httpEnvironmentsAdd = t.Object({
+  name: t.String(),
+  variables: t.Optional(httpEnvironmentVariables),
+})
+
+const httpEnvironmentsUpdate = t.Object({
+  name: t.Optional(t.String()),
+  variables: t.Optional(httpEnvironmentVariables),
+})
+
+const httpEnvironmentsSetActive = t.Object({
+  id: t.Union([t.Number(), t.Null()]),
+})
+
+const httpEnvironmentItem = t.Object({
+  id: t.Number(),
+  name: t.String(),
+  variables: httpEnvironmentVariables,
+  createdAt: t.Number(),
+  updatedAt: t.Number(),
+})
+
+const httpEnvironmentsResponse = t.Object({
+  activeId: t.Union([t.Number(), t.Null()]),
+  items: t.Array(httpEnvironmentItem),
+})
+
+export const httpEnvironmentsDTO = new Elysia().model({
+  httpEnvironmentItemResponse: httpEnvironmentItem,
+  httpEnvironmentsAdd,
+  httpEnvironmentsResponse,
+  httpEnvironmentsSetActive,
+  httpEnvironmentsUpdate,
+})
+
+export type HttpEnvironmentsAdd = typeof httpEnvironmentsAdd.static
+export type HttpEnvironmentsUpdate = typeof httpEnvironmentsUpdate.static
+export type HttpEnvironmentsSetActive = typeof httpEnvironmentsSetActive.static
+export type HttpEnvironmentsResponse = typeof httpEnvironmentsResponse.static
+export type HttpEnvironmentItemResponse = typeof httpEnvironmentItem.static
diff --git a/src/main/api/dto/http-folders.ts b/src/main/api/dto/http-folders.ts
new file mode 100644
index 00000000..eebcb5fa
--- /dev/null
+++ b/src/main/api/dto/http-folders.ts
@@ -0,0 +1,48 @@
+import Elysia, { t } from 'elysia'
+
+const httpFoldersAdd = t.Object({
+  name: t.String(),
+  icon: t.Optional(t.Union([t.String(), t.Null()])),
+  parentId: t.Optional(t.Union([t.Number(), t.Null()])),
+})
+
+const httpFoldersUpdate = t.Object({
+  name: t.Optional(t.String()),
+  icon: t.Optional(t.Union([t.String(), t.Null()])),
+  parentId: t.Optional(t.Union([t.Number(), t.Null()])),
+  isOpen: t.Optional(t.Number({ minimum: 0, maximum: 1 })),
+  orderIndex: t.Optional(t.Number()),
+})
+
+const httpFoldersItem = t.Object({
+  id: t.Number(),
+  name: t.String(),
+  icon: t.Union([t.String(), t.Null()]),
+  createdAt: t.Number(),
+  updatedAt: t.Number(),
+  parentId: t.Union([t.Number(), t.Null()]),
+  isOpen: t.Number(),
+  orderIndex: t.Number(),
+})
+
+const httpFoldersItemWithChildren = t.Recursive(This =>
+  t.Object({
+    ...httpFoldersItem.properties,
+    children: t.Array(This),
+  }),
+)
+
+const httpFoldersResponse = t.Array(httpFoldersItem)
+const httpFoldersTreeResponse = t.Array(httpFoldersItemWithChildren)
+
+export const httpFoldersDTO = new Elysia().model({
+  httpFoldersAdd,
+  httpFoldersResponse,
+  httpFoldersTreeResponse,
+  httpFoldersUpdate,
+})
+
+export type HttpFoldersAdd = typeof httpFoldersAdd.static
+export type HttpFoldersResponse = typeof httpFoldersResponse.static
+export type HttpFoldersTree = typeof httpFoldersTreeResponse.static
+export type HttpFoldersItem = typeof httpFoldersItem.static
diff --git a/src/main/api/dto/http-history.ts b/src/main/api/dto/http-history.ts
new file mode 100644
index 00000000..7b85b7f6
--- /dev/null
+++ b/src/main/api/dto/http-history.ts
@@ -0,0 +1,33 @@
+import Elysia, { t } from 'elysia'
+
+const httpMethod = t.Union([
+  t.Literal('GET'),
+  t.Literal('POST'),
+  t.Literal('PUT'),
+  t.Literal('PATCH'),
+  t.Literal('DELETE'),
+  t.Literal('HEAD'),
+  t.Literal('OPTIONS'),
+])
+
+const httpHistoryItem = t.Object({
+  id: t.Number(),
+  requestId: t.Union([t.Number(), t.Null()]),
+  method: httpMethod,
+  url: t.String(),
+  status: t.Union([t.Number(), t.Null()]),
+  durationMs: t.Number(),
+  sizeBytes: t.Number(),
+  requestedAt: t.Number(),
+  error: t.Optional(t.String()),
+})
+
+const httpHistoryResponse = t.Array(httpHistoryItem)
+
+export const httpHistoryDTO = new Elysia().model({
+  httpHistoryItemResponse: httpHistoryItem,
+  httpHistoryResponse,
+})
+
+export type HttpHistoryResponse = typeof httpHistoryResponse.static
+export type HttpHistoryItemResponse = typeof httpHistoryItem.static
diff --git a/src/main/api/dto/http-requests.ts b/src/main/api/dto/http-requests.ts
new file mode 100644
index 00000000..edcd6443
--- /dev/null
+++ b/src/main/api/dto/http-requests.ts
@@ -0,0 +1,110 @@
+import Elysia, { t } from 'elysia'
+
+const httpMethod = t.Union([
+  t.Literal('GET'),
+  t.Literal('POST'),
+  t.Literal('PUT'),
+  t.Literal('PATCH'),
+  t.Literal('DELETE'),
+  t.Literal('HEAD'),
+  t.Literal('OPTIONS'),
+])
+
+const httpBodyType = t.Union([
+  t.Literal('none'),
+  t.Literal('json'),
+  t.Literal('text'),
+  t.Literal('form-urlencoded'),
+  t.Literal('multipart'),
+])
+
+const httpAuthType = t.Union([
+  t.Literal('none'),
+  t.Literal('bearer'),
+  t.Literal('basic'),
+])
+
+const httpHeaderEntry = t.Object({
+  key: t.String(),
+  value: t.String(),
+  description: t.Optional(t.String()),
+  enabled: t.Optional(t.Boolean()),
+})
+
+const httpQueryEntry = t.Object({
+  key: t.String(),
+  value: t.String(),
+  description: t.Optional(t.String()),
+  enabled: t.Optional(t.Boolean()),
+})
+
+const httpFormDataEntry = t.Object({
+  key: t.String(),
+  type: t.Union([t.Literal('text'), t.Literal('file')]),
+  value: t.String(),
+})
+
+const httpAuth = t.Object({
+  type: httpAuthType,
+  token: t.Optional(t.String()),
+  username: t.Optional(t.String()),
+  password: t.Optional(t.String()),
+})
+
+const httpRequestsAdd = t.Object({
+  name: t.String(),
+  folderId: t.Optional(t.Union([t.Number(), t.Null()])),
+  method: t.Optional(httpMethod),
+  url: t.Optional(t.String()),
+})
+
+const httpRequestsUpdate = t.Object({
+  name: t.Optional(t.String()),
+  folderId: t.Optional(t.Union([t.Number(), t.Null()])),
+  method: t.Optional(httpMethod),
+  url: t.Optional(t.String()),
+  headers: t.Optional(t.Array(httpHeaderEntry)),
+  query: t.Optional(t.Array(httpQueryEntry)),
+  bodyType: t.Optional(httpBodyType),
+  body: t.Optional(t.Union([t.String(), t.Null()])),
+  formData: t.Optional(t.Array(httpFormDataEntry)),
+  auth: t.Optional(httpAuth),
+  description: t.Optional(t.String()),
+})
+
+const httpRequestItem = t.Object({
+  id: t.Number(),
+  name: t.String(),
+  folderId: t.Union([t.Number(), t.Null()]),
+  method: httpMethod,
+  url: t.String(),
+  headers: t.Array(httpHeaderEntry),
+  query: t.Array(httpQueryEntry),
+  bodyType: httpBodyType,
+  body: t.Union([t.String(), t.Null()]),
+  formData: t.Array(httpFormDataEntry),
+  auth: httpAuth,
+  description: t.String(),
+  filePath: t.String(),
+  createdAt: t.Number(),
+  updatedAt: t.Number(),
+})
+
+const httpRequestsResponse = t.Array(httpRequestItem)
+
+const httpRequestsQuery = t.Object({
+  search: t.Optional(t.String()),
+})
+
+export const httpRequestsDTO = new Elysia().model({
+  httpRequestItemResponse: httpRequestItem,
+  httpRequestsAdd,
+  httpRequestsQuery,
+  httpRequestsResponse,
+  httpRequestsUpdate,
+})
+
+export type HttpRequestsAdd = typeof httpRequestsAdd.static
+export type HttpRequestsUpdate = typeof httpRequestsUpdate.static
+export type HttpRequestsResponse = typeof httpRequestsResponse.static
+export type HttpRequestItemResponse = typeof httpRequestItem.static
diff --git a/src/main/api/index.ts b/src/main/api/index.ts
index c735eff0..ef23ef2c 100644
--- a/src/main/api/index.ts
+++ b/src/main/api/index.ts
@@ -5,6 +5,10 @@ import { Elysia } from 'elysia'
 import { store } from '../store'
 import { importEsm } from '../utils'
 import folders from './routes/folders'
+import httpEnvironments from './routes/http-environments'
+import httpFolders from './routes/http-folders'
+import httpHistory from './routes/http-history'
+import httpRequests from './routes/http-requests'
 import noteFolders from './routes/note-folders'
 import noteTags from './routes/note-tags'
 import notes from './routes/notes'
@@ -43,6 +47,10 @@ export async function initApi() {
     .use(notes)
     .use(noteFolders)
     .use(noteTags)
+    .use(httpFolders)
+    .use(httpRequests)
+    .use(httpEnvironments)
+    .use(httpHistory)
     .listen(port)
 
   // eslint-disable-next-line no-console
diff --git a/src/main/api/routes/http-environments.ts b/src/main/api/routes/http-environments.ts
new file mode 100644
index 00000000..68469492
--- /dev/null
+++ b/src/main/api/routes/http-environments.ts
@@ -0,0 +1,162 @@
+import type { HttpEnvironmentsResponse } from '../dto/http-environments'
+import { Elysia } from 'elysia'
+import { useHttpStorage } from '../../storage'
+import { commonAddResponse } from '../dto/common/response'
+import { httpEnvironmentsDTO } from '../dto/http-environments'
+
+const app = new Elysia({ prefix: '/http-environments' })
+
+function parseStorageError(
+  error: unknown,
+): { code: string, message: string } | null {
+  if (!(error instanceof Error)) {
+    return null
+  }
+
+  const separatorIndex = error.message.indexOf(':')
+  if (separatorIndex <= 0) {
+    return null
+  }
+
+  return {
+    code: error.message.slice(0, separatorIndex),
+    message: error.message.slice(separatorIndex + 1).trim(),
+  }
+}
+
+function mapStorageError(status: unknown, error: unknown): never {
+  const setStatus = status as (
+    code: number,
+    payload: { message: string },
+  ) => never
+  const parsedError = parseStorageError(error)
+
+  if (!parsedError) {
+    return setStatus(500, { message: 'Internal storage error' })
+  }
+
+  if (parsedError.code === 'NAME_CONFLICT') {
+    return setStatus(409, { message: parsedError.message })
+  }
+
+  if (
+    parsedError.code === 'INVALID_NAME'
+    || parsedError.code === 'RESERVED_NAME'
+  ) {
+    return setStatus(400, { message: parsedError.message })
+  }
+
+  return setStatus(500, {
+    message: parsedError.message || 'Internal storage error',
+  })
+}
+
+app
+  .use(httpEnvironmentsDTO)
+  .get(
+    '/',
+    () => {
+      const storage = useHttpStorage()
+      const items = storage.environments.getEnvironments()
+      const activeId = storage.environments.getActiveEnvironmentId()
+
+      return { activeId, items } as HttpEnvironmentsResponse
+    },
+    {
+      response: 'httpEnvironmentsResponse',
+      detail: {
+        tags: ['HTTP Environments'],
+      },
+    },
+  )
+  .post(
+    '/',
+    ({ body, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { id } = storage.environments.createEnvironment(body)
+
+        return { id }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      body: 'httpEnvironmentsAdd',
+      response: commonAddResponse,
+      detail: {
+        tags: ['HTTP Environments'],
+      },
+    },
+  )
+  .patch(
+    '/:id',
+    ({ params, body, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { invalidInput, notFound }
+          = storage.environments.updateEnvironment(Number(params.id), body)
+
+        if (invalidInput) {
+          return status(400, { message: 'Need at least one field to update' })
+        }
+
+        if (notFound) {
+          return status(404, { message: 'Environment not found' })
+        }
+
+        return { message: 'Environment updated' }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      body: 'httpEnvironmentsUpdate',
+      detail: {
+        tags: ['HTTP Environments'],
+      },
+    },
+  )
+  .delete(
+    '/:id',
+    ({ params, status }) => {
+      const storage = useHttpStorage()
+      const { deleted } = storage.environments.deleteEnvironment(
+        Number(params.id),
+      )
+
+      if (!deleted) {
+        return status(404, { message: 'Environment not found' })
+      }
+
+      return { message: 'Environment deleted' }
+    },
+    {
+      detail: {
+        tags: ['HTTP Environments'],
+      },
+    },
+  )
+  .post(
+    '/active',
+    ({ body, status }) => {
+      const storage = useHttpStorage()
+      const { notFound } = storage.environments.setActiveEnvironment(body.id)
+
+      if (notFound) {
+        return status(404, { message: 'Environment not found' })
+      }
+
+      return { message: 'Active environment set' }
+    },
+    {
+      body: 'httpEnvironmentsSetActive',
+      detail: {
+        tags: ['HTTP Environments'],
+      },
+    },
+  )
+
+export default app
diff --git a/src/main/api/routes/http-folders.ts b/src/main/api/routes/http-folders.ts
new file mode 100644
index 00000000..d169d4e6
--- /dev/null
+++ b/src/main/api/routes/http-folders.ts
@@ -0,0 +1,165 @@
+import type { HttpFoldersResponse, HttpFoldersTree } from '../dto/http-folders'
+import { Elysia } from 'elysia'
+import { useHttpStorage } from '../../storage'
+import { commonAddResponse } from '../dto/common/response'
+import { httpFoldersDTO } from '../dto/http-folders'
+
+const app = new Elysia({ prefix: '/http-folders' })
+
+function parseStorageError(
+  error: unknown,
+): { code: string, message: string } | null {
+  if (!(error instanceof Error)) {
+    return null
+  }
+
+  const separatorIndex = error.message.indexOf(':')
+  if (separatorIndex <= 0) {
+    return null
+  }
+
+  return {
+    code: error.message.slice(0, separatorIndex),
+    message: error.message.slice(separatorIndex + 1).trim(),
+  }
+}
+
+function mapStorageError(status: unknown, error: unknown): never {
+  const setStatus = status as (
+    code: number,
+    payload: { message: string },
+  ) => never
+  const parsedError = parseStorageError(error)
+
+  if (!parsedError) {
+    return setStatus(500, { message: 'Internal storage error' })
+  }
+
+  if (parsedError.code === 'NAME_CONFLICT') {
+    return setStatus(409, { message: parsedError.message })
+  }
+
+  if (parsedError.code === 'FOLDER_NOT_FOUND') {
+    return setStatus(404, { message: parsedError.message })
+  }
+
+  if (
+    parsedError.code === 'INVALID_NAME'
+    || parsedError.code === 'RESERVED_NAME'
+  ) {
+    return setStatus(400, { message: parsedError.message })
+  }
+
+  return setStatus(500, {
+    message: parsedError.message || 'Internal storage error',
+  })
+}
+
+app
+  .use(httpFoldersDTO)
+  .get(
+    '/',
+    () => {
+      const storage = useHttpStorage()
+      const result = storage.folders.getFolders()
+
+      return result as HttpFoldersResponse
+    },
+    {
+      response: 'httpFoldersResponse',
+      detail: {
+        tags: ['HTTP Folders'],
+      },
+    },
+  )
+  .get(
+    '/tree',
+    (): any => {
+      const storage = useHttpStorage()
+
+      return storage.folders.getFoldersTree() as HttpFoldersTree
+    },
+    {
+      response: 'httpFoldersTreeResponse',
+      detail: {
+        tags: ['HTTP Folders'],
+      },
+    },
+  )
+  .post(
+    '/',
+    ({ body, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { id } = storage.folders.createFolder(body)
+
+        return { id }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      body: 'httpFoldersAdd',
+      response: commonAddResponse,
+      detail: {
+        tags: ['HTTP Folders'],
+      },
+    },
+  )
+  .patch(
+    '/:id',
+    ({ params, body, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { invalidInput, notFound } = storage.folders.updateFolder(
+          Number(params.id),
+          body,
+        )
+
+        if (invalidInput) {
+          return status(400, { message: 'Need at least one field to update' })
+        }
+
+        if (notFound) {
+          return status(404, { message: 'Folder not found' })
+        }
+
+        return { message: 'Folder updated' }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      body: 'httpFoldersUpdate',
+      detail: {
+        tags: ['HTTP Folders'],
+      },
+    },
+  )
+  .delete(
+    '/:id',
+    ({ params, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { deleted } = storage.folders.deleteFolder(Number(params.id))
+
+        if (!deleted) {
+          return status(404, { message: 'Folder not found' })
+        }
+
+        return { message: 'Folder deleted' }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      detail: {
+        tags: ['HTTP Folders'],
+      },
+    },
+  )
+
+export default app
diff --git a/src/main/api/routes/http-history.ts b/src/main/api/routes/http-history.ts
new file mode 100644
index 00000000..bd33c546
--- /dev/null
+++ b/src/main/api/routes/http-history.ts
@@ -0,0 +1,38 @@
+import type { HttpHistoryResponse } from '../dto/http-history'
+import { Elysia } from 'elysia'
+import { useHttpStorage } from '../../storage'
+import { httpHistoryDTO } from '../dto/http-history'
+
+const app = new Elysia({ prefix: '/http-history' })
+
+app
+  .use(httpHistoryDTO)
+  .get(
+    '/',
+    () => {
+      const storage = useHttpStorage()
+      return storage.history.getEntries() as HttpHistoryResponse
+    },
+    {
+      response: 'httpHistoryResponse',
+      detail: {
+        tags: ['HTTP History'],
+      },
+    },
+  )
+  .delete(
+    '/',
+    () => {
+      const storage = useHttpStorage()
+      storage.history.clear()
+
+      return { message: 'History cleared' }
+    },
+    {
+      detail: {
+        tags: ['HTTP History'],
+      },
+    },
+  )
+
+export default app
diff --git a/src/main/api/routes/http-requests.ts b/src/main/api/routes/http-requests.ts
new file mode 100644
index 00000000..20492f68
--- /dev/null
+++ b/src/main/api/routes/http-requests.ts
@@ -0,0 +1,175 @@
+import type {
+  HttpRequestItemResponse,
+  HttpRequestsResponse,
+} from '../dto/http-requests'
+import { Elysia } from 'elysia'
+import { useHttpStorage } from '../../storage'
+import {
+  commonAddResponse,
+  commonMessageResponse,
+} from '../dto/common/response'
+import { httpRequestsDTO } from '../dto/http-requests'
+
+const app = new Elysia({ prefix: '/http-requests' })
+
+function parseStorageError(
+  error: unknown,
+): { code: string, message: string } | null {
+  if (!(error instanceof Error)) {
+    return null
+  }
+
+  const separatorIndex = error.message.indexOf(':')
+  if (separatorIndex <= 0) {
+    return null
+  }
+
+  return {
+    code: error.message.slice(0, separatorIndex),
+    message: error.message.slice(separatorIndex + 1).trim(),
+  }
+}
+
+function mapStorageError(status: unknown, error: unknown): never {
+  const setStatus = status as (
+    code: number,
+    payload: { message: string },
+  ) => never
+  const parsedError = parseStorageError(error)
+
+  if (!parsedError) {
+    return setStatus(500, { message: 'Internal storage error' })
+  }
+
+  if (parsedError.code === 'NAME_CONFLICT') {
+    return setStatus(409, { message: parsedError.message })
+  }
+
+  if (parsedError.code === 'FOLDER_NOT_FOUND') {
+    return setStatus(404, { message: parsedError.message })
+  }
+
+  if (
+    parsedError.code === 'INVALID_NAME'
+    || parsedError.code === 'RESERVED_NAME'
+  ) {
+    return setStatus(400, { message: parsedError.message })
+  }
+
+  return setStatus(500, {
+    message: parsedError.message || 'Internal storage error',
+  })
+}
+
+app
+  .use(httpRequestsDTO)
+  .get(
+    '/',
+    ({ query }) => {
+      const storage = useHttpStorage()
+      const result = storage.requests.getRequests(query)
+
+      return result as HttpRequestsResponse
+    },
+    {
+      query: 'httpRequestsQuery',
+      response: 'httpRequestsResponse',
+      detail: {
+        tags: ['HTTP Requests'],
+      },
+    },
+  )
+  .get(
+    '/:id',
+    ({ params, status }) => {
+      const storage = useHttpStorage()
+      const request = storage.requests.getRequestById(Number(params.id))
+
+      if (!request) {
+        return status(404, { message: 'Request not found' })
+      }
+
+      return request as HttpRequestItemResponse
+    },
+    {
+      response: {
+        200: 'httpRequestItemResponse',
+        404: commonMessageResponse,
+      },
+      detail: {
+        tags: ['HTTP Requests'],
+      },
+    },
+  )
+  .post(
+    '/',
+    ({ body, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { id } = storage.requests.createRequest(body)
+
+        return { id }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      body: 'httpRequestsAdd',
+      response: commonAddResponse,
+      detail: {
+        tags: ['HTTP Requests'],
+      },
+    },
+  )
+  .patch(
+    '/:id',
+    ({ params, body, status }) => {
+      const storage = useHttpStorage()
+      try {
+        const { invalidInput, notFound } = storage.requests.updateRequest(
+          Number(params.id),
+          body,
+        )
+
+        if (invalidInput) {
+          return status(400, { message: 'Need at least one field to update' })
+        }
+
+        if (notFound) {
+          return status(404, { message: 'Request not found' })
+        }
+
+        return { message: 'Request updated' }
+      }
+      catch (error) {
+        return mapStorageError(status, error)
+      }
+    },
+    {
+      body: 'httpRequestsUpdate',
+      detail: {
+        tags: ['HTTP Requests'],
+      },
+    },
+  )
+  .delete(
+    '/:id',
+    ({ params, status }) => {
+      const storage = useHttpStorage()
+      const { deleted } = storage.requests.deleteRequest(Number(params.id))
+
+      if (!deleted) {
+        return status(404, { message: 'Request not found' })
+      }
+
+      return { message: 'Request deleted' }
+    },
+    {
+      detail: {
+        tags: ['HTTP Requests'],
+      },
+    },
+  )
+
+export default app
diff --git a/src/main/i18n/locales/en_US/menu.json b/src/main/i18n/locales/en_US/menu.json
index d0ea0d63..69e24d76 100644
--- a/src/main/i18n/locales/en_US/menu.json
+++ b/src/main/i18n/locales/en_US/menu.json
@@ -70,6 +70,7 @@
     "previewCode": "Preview Code",
     "previewScreenshot": "Preview Screenshot",
     "previewJson": "Preview JSON",
+    "sendRequest": "Send Request",
     "fontSizeIncrease": "Font Size Increase",
     "fontSizeDecrease": "Font Size Decrease",
     "fontSizeReset": "Font Size Reset"
diff --git a/src/main/i18n/locales/en_US/messages.json b/src/main/i18n/locales/en_US/messages.json
index 0b1f51c9..fd2d3607 100644
--- a/src/main/i18n/locales/en_US/messages.json
+++ b/src/main/i18n/locales/en_US/messages.json
@@ -1,6 +1,8 @@
 {
   "confirm": {
     "delete": "Are you sure you want to delete \"{{name}}\"?",
+    "deleteVariable": "Are you sure you want to delete variable \"{{name}}\"?",
+    "deleteUnnamedVariable": "Are you sure you want to delete this variable?",
     "deletePermanently": "Are you sure you want to permanently delete \"{{name}}\"?",
     "deleteConfirmMultipleSnippets": "Are you sure you want to permanently delete {{count}} selected snippets?",
     "emptyTrash": "Are you sure you want to permanently delete all snippets in Trash?",
@@ -39,6 +41,7 @@
     "entryNameWindowsReserved": "This name is reserved on Windows.",
     "entryNameNoteConflict": "A note with this name already exists in this folder.",
     "entryNameSnippetConflict": "A snippet with this name already exists in this folder.",
+    "entryNameRequestConflict": "A request with this name already exists in this folder.",
     "entryNameFolderConflict": "A folder with this name already exists at this level."
   },
   "description": {
@@ -53,15 +56,20 @@
     "trigger": {
       "copy": {
         "code": "{{count}} snippets copied 🚀",
+        "http": "{{count}} HTTP items copied 🚀",
         "notes": "{{count}} notes copied 🚀",
         "math": "{{count}} math results copied 🚀",
         "tools": "{{count}} tool outputs copied 🚀"
       },
       "created": {
         "code": "{{count}} snippets created 🎉",
+        "http": "{{count}} HTTP requests created 🎉",
         "notes": "{{count}} notes created 🎉",
         "math": "{{count}} sheets created 🎉"
       },
+      "sent": {
+        "http": "{{count}} HTTP requests sent 🚀"
+      },
       "streak_7": {
         "title": "7 days in a row 🔥"
       },
diff --git a/src/main/i18n/locales/en_US/preferences.json b/src/main/i18n/locales/en_US/preferences.json
index 52e7fb37..5818b184 100644
--- a/src/main/i18n/locales/en_US/preferences.json
+++ b/src/main/i18n/locales/en_US/preferences.json
@@ -148,6 +148,23 @@
       "rateLimited": "Rate limit exceeded. Try again later."
     }
   },
+  "http": {
+    "label": "HTTP Client",
+    "wrapLines": {
+      "label": "Wrap Lines",
+      "description": "Wrap long lines in HTTP preview, request body, and response viewers."
+    },
+    "defaultPreviewFormat": {
+      "label": "Default Preview Format",
+      "description": "Format selected by default in the request preview panel.",
+      "http": "HTTP",
+      "curl": "cURL"
+    },
+    "autoSwitchToResponse": {
+      "label": "Show Response After Send",
+      "description": "Switch the bottom panel to Response when a request starts or finishes."
+    }
+  },
   "api": {
     "label": "API Port",
     "port": {
diff --git a/src/main/i18n/locales/en_US/ui.json b/src/main/i18n/locales/en_US/ui.json
index a234a33d..594e116c 100644
--- a/src/main/i18n/locales/en_US/ui.json
+++ b/src/main/i18n/locales/en_US/ui.json
@@ -32,6 +32,111 @@
       "untitled": "Untitled",
       "currencyUnavailable": "Currency rates service unavailable"
     },
+    "http": {
+      "label": "HTTP",
+      "tooltip": "HTTP client",
+      "title": "HTTP Client",
+      "untitledRequest": "Untitled request",
+      "empty": "No requests yet",
+      "noUrl": "No URL",
+      "action": {
+        "newRequest": "New request",
+        "newEnvironment": "New environment",
+        "manageEnvironments": "Manage environments",
+        "deleteEnvironment": "Delete environment"
+      },
+      "environments": {
+        "title": "Environments",
+        "none": "No environment",
+        "activeTooltip": "Environment: {{name}}",
+        "selectTooltip": "Select environment",
+        "manage": "Manage environments…",
+        "empty": "No environments yet",
+        "untitled": "Untitled environment",
+        "namePlaceholder": "Environment name",
+        "variables": "Variables",
+        "noVariables": "No variables yet",
+        "varKey": "Variable",
+        "varValue": "Value",
+        "addVariable": "Add variable",
+        "noEnvironmentSelected": "Select an environment to edit its variables"
+      },
+      "editor": {
+        "noSelected": "No request selected",
+        "namePlaceholder": "Request name",
+        "urlPlaceholder": "Enter request URL",
+        "send": "Send",
+        "tabs": {
+          "params": "Params",
+          "headers": "Headers",
+          "body": "Body",
+          "auth": "Auth",
+          "description": "Description"
+        },
+        "keyValue": {
+          "key": "Key",
+          "value": "Value",
+          "description": "Description",
+          "addRow": "Add row",
+          "empty": "No entries"
+        },
+        "body": {
+          "typeNone": "None",
+          "typeJson": "JSON",
+          "typeText": "Text",
+          "typeFormUrlencoded": "Form URL-encoded",
+          "typeMultipart": "Multipart form-data",
+          "placeholder": "Enter request body",
+          "fieldType": {
+            "text": "Text",
+            "file": "File"
+          },
+          "filePlaceholder": "Select file path",
+          "jsonInvalid": "Invalid JSON"
+        },
+        "auth": {
+          "typeNone": "No Auth",
+          "typeBearer": "Bearer Token",
+          "typeBasic": "Basic Auth",
+          "token": "Token",
+          "tokenPlaceholder": "Enter token",
+          "username": "Username",
+          "usernamePlaceholder": "Enter username",
+          "password": "Password",
+          "passwordPlaceholder": "Enter password"
+        },
+        "description": {
+          "placeholder": "Add a description for this request"
+        },
+        "panels": {
+          "preview": "Preview",
+          "response": "Response"
+        },
+        "preview": {
+          "empty": "No request preview",
+          "formats": {
+            "http": "HTTP",
+            "curl": "cURL"
+          }
+        },
+        "response": {
+          "empty": "No response yet",
+          "executing": "Sending request",
+          "status": "Status",
+          "time": "Time",
+          "size": "Size",
+          "tabs": {
+            "body": "Body",
+            "headers": "Headers"
+          },
+          "error": "Request failed",
+          "truncated": "Response truncated",
+          "binaryNotice": "Binary response not displayed",
+          "copy": "Copy",
+          "copied": "Copied"
+        }
+      }
+    },
     "tools": {
       "label": "Tools",
       "tooltip": "Developer tools"
@@ -206,7 +311,9 @@
       "snippet": "Copy Snippet",
       "snippetLink": "Copy Snippet Link",
       "note": "Copy Note",
-      "noteLink": "Copy Note Link"
+      "noteLink": "Copy Note Link",
+      "request": "Copy Request",
+      "requestLink": "Copy Request Link"
     },
     "select": {
       "directory": "Select Directory"
@@ -214,15 +321,17 @@
   },
   "internalLinks": {
     "picker": {
-      "searchPlaceholder": "Search snippets and notes...",
+      "searchPlaceholder": "Search snippets, HTTP requests, and notes...",
       "emptyResults": "No results",
       "groups": {
         "snippets": "Snippets",
+        "httpRequests": "HTTP Requests",
         "notes": "Notes"
       }
     },
     "missing": {
       "snippet": "Snippet not found",
+      "httpRequest": "HTTP request not found",
       "note": "Note not found"
     }
   },
diff --git a/src/main/i18n/locales/ru_RU/menu.json b/src/main/i18n/locales/ru_RU/menu.json
index 1f33f05f..563cd5eb 100644
--- a/src/main/i18n/locales/ru_RU/menu.json
+++ b/src/main/i18n/locales/ru_RU/menu.json
@@ -70,6 +70,7 @@
     "previewCode": "Предпросмотр кода",
     "previewScreenshot": "Предпросмотр скриншота",
     "previewJson": "Предпросмотр JSON",
+    "sendRequest": "Отправить запрос",
     "fontSizeIncrease": "Увеличить размер шрифта",
     "fontSizeDecrease": "Уменьшить размер шрифта",
     "fontSizeReset": "Сбросить размер шрифта"
diff --git a/src/main/i18n/locales/ru_RU/messages.json b/src/main/i18n/locales/ru_RU/messages.json
index 8d55df30..585389a6 100644
--- a/src/main/i18n/locales/ru_RU/messages.json
+++ b/src/main/i18n/locales/ru_RU/messages.json
@@ -1,6 +1,8 @@
 {
   "confirm": {
     "delete": "Вы уверены, что хотите удалить \"{{name}}\"?",
+    "deleteVariable": "Вы уверены, что хотите удалить переменную \"{{name}}\"?",
+    "deleteUnnamedVariable": "Вы уверены, что хотите удалить эту переменную?",
     "deletePermanently": "Вы уверены, что хотите навсегда удалить \"{{name}}\"?",
     "deleteConfirmMultipleSnippets": "Вы уверены, что хотите навсегда удалить {{count}} выбранных сниппетов?",
     "emptyTrash": "Вы уверены, что хотите навсегда удалить все сниппеты из Корзины?",
@@ -34,6 +36,7 @@
     "entryNameWindowsReserved": "Это имя зарезервировано в Windows.",
     "entryNameNoteConflict": "В этой папке уже есть заметка с таким именем.",
     "entryNameSnippetConflict": "В этой папке уже есть сниппет с таким именем.",
+    "entryNameRequestConflict": "В этой папке уже есть запрос с таким именем.",
     "entryNameFolderConflict": "Папка с таким именем уже существует на этом уровне."
   },
   "description": {
@@ -48,15 +51,20 @@
     "trigger": {
       "copy": {
         "code": "Скопировано {{count}} сниппетов 🚀",
+        "http": "Скопировано {{count}} HTTP-элементов 🚀",
         "notes": "Скопировано {{count}} заметок 🚀",
         "math": "Скопировано {{count}} вычислений 🚀",
         "tools": "Скопировано {{count}} результатов из инструментов 🚀"
       },
       "created": {
         "code": "Создано {{count}} сниппетов 🎉",
+        "http": "Создано {{count}} HTTP-запросов 🎉",
         "notes": "Создано {{count}} заметок 🎉",
         "math": "Создано {{count}} листов 🎉"
       },
+      "sent": {
+        "http": "Отправлено {{count}} HTTP-запросов 🚀"
+      },
       "streak_7": {
         "title": "7 дней подряд 🔥"
       },
diff --git a/src/main/i18n/locales/ru_RU/preferences.json b/src/main/i18n/locales/ru_RU/preferences.json
index ef84c92b..b3a74357 100644
--- a/src/main/i18n/locales/ru_RU/preferences.json
+++ b/src/main/i18n/locales/ru_RU/preferences.json
@@ -115,6 +115,23 @@
     "label": "Markdown",
     "codeRenderer": "Рендер блоков кода"
   },
+  "http": {
+    "label": "HTTP Client",
+    "wrapLines": {
+      "label": "Перенос строк",
+      "description": "Переносить длинные строки в превью HTTP, теле запроса и просмотре ответа."
+    },
+    "defaultPreviewFormat": {
+      "label": "Формат превью по умолчанию",
+      "description": "Формат, который выбран по умолчанию в панели превью запроса.",
+      "http": "HTTP",
+      "curl": "cURL"
+    },
+    "autoSwitchToResponse": {
+      "label": "Показывать ответ после отправки",
+      "description": "Переключать нижнюю панель на Response, когда запрос начинается или завершается."
+    }
+  },
   "api": {
     "label": "Порт API",
     "port": {
diff --git a/src/main/i18n/locales/ru_RU/ui.json b/src/main/i18n/locales/ru_RU/ui.json
index 5c52d382..759ac13e 100644
--- a/src/main/i18n/locales/ru_RU/ui.json
+++ b/src/main/i18n/locales/ru_RU/ui.json
@@ -32,6 +32,111 @@
       "untitled": "Без названия",
       "currencyUnavailable": "Сервис курсов валют недоступен"
     },
+    "http": {
+      "label": "HTTP",
+      "tooltip": "HTTP-клиент",
+      "title": "HTTP-клиент",
+      "untitledRequest": "Безымянный запрос",
+      "empty": "Пока нет запросов",
+      "noUrl": "Нет URL",
+      "action": {
+        "newRequest": "Новый запрос",
+        "newEnvironment": "Новое окружение",
+        "manageEnvironments": "Управление окружениями",
+        "deleteEnvironment": "Удалить окружение"
+      },
+      "environments": {
+        "title": "Окружения",
+        "none": "Без окружения",
+        "activeTooltip": "Окружение: {{name}}",
+        "selectTooltip": "Выбрать окружение",
+        "manage": "Управление окружениями…",
+        "empty": "Окружений пока нет",
+        "untitled": "Безымянное окружение",
+        "namePlaceholder": "Название окружения",
+        "variables": "Переменные",
+        "noVariables": "Переменных пока нет",
+        "varKey": "Переменная",
+        "varValue": "Значение",
+        "addVariable": "Добавить переменную",
+        "noEnvironmentSelected": "Выберите окружение, чтобы отредактировать его переменные"
+      },
+      "editor": {
+        "noSelected": "Запрос не выбран",
+        "namePlaceholder": "Название запроса",
+        "urlPlaceholder": "Введите URL запроса",
+        "send": "Отправить",
+        "tabs": {
+          "params": "Параметры",
+          "headers": "Заголовки",
+          "body": "Тело",
+          "auth": "Авторизация",
+          "description": "Описание"
+        },
+        "keyValue": {
+          "key": "Ключ",
+          "value": "Значение",
+          "description": "Описание",
+          "addRow": "Добавить строку",
+          "empty": "Нет записей"
+        },
+        "body": {
+          "typeNone": "Без тела",
+          "typeJson": "JSON",
+          "typeText": "Text",
+          "typeFormUrlencoded": "Form URL-encoded",
+          "typeMultipart": "Multipart form-data",
+          "placeholder": "Введите тело запроса",
+          "fieldType": {
+            "text": "Текст",
+            "file": "Файл"
+          },
+          "filePlaceholder": "Укажите путь к файлу",
+          "jsonInvalid": "Невалидный JSON"
+        },
+        "auth": {
+          "typeNone": "Без авторизации",
+          "typeBearer": "Bearer Token",
+          "typeBasic": "Basic Auth",
+          "token": "Токен",
+          "tokenPlaceholder": "Введите токен",
+          "username": "Логин",
+          "usernamePlaceholder": "Введите логин",
+          "password": "Пароль",
+          "passwordPlaceholder": "Введите пароль"
+        },
+        "description": {
+          "placeholder": "Добавьте описание для этого запроса"
+        },
+        "panels": {
+          "preview": "Превью",
+          "response": "Ответ"
+        },
+        "preview": {
+          "empty": "Нет превью запроса",
+          "formats": {
+            "http": "HTTP",
+            "curl": "cURL"
+          }
+        },
+        "response": {
+          "empty": "Ответа пока нет",
+          "executing": "Отправка запроса",
+          "status": "Статус",
+          "time": "Время",
+          "size": "Размер",
+          "tabs": {
+            "body": "Тело",
+            "headers": "Заголовки"
+          },
+          "error": "Ошибка запроса",
+          "truncated": "Ответ обрезан",
+          "binaryNotice": "Бинарный ответ не отображается",
+          "copy": "Копировать",
+          "copied": "Скопировано"
+        }
+      }
+    },
     "tools": {
       "label": "Инструменты",
       "tooltip": "Инструменты разработчика"
@@ -206,12 +311,30 @@
       "snippet": "Копировать сниппет",
       "snippetLink": "Копировать ссылку на сниппет",
       "note": "Копировать заметку",
-      "noteLink": "Копировать ссылку на заметку"
+      "noteLink": "Копировать ссылку на заметку",
+      "request": "Копировать запрос",
+      "requestLink": "Копировать ссылку на запрос"
     },
     "select": {
       "directory": "Выбрать директорию"
     }
   },
+  "internalLinks": {
+    "picker": {
+      "searchPlaceholder": "Поиск сниппетов, HTTP-запросов и заметок...",
+      "emptyResults": "Нет результатов",
+      "groups": {
+        "snippets": "Сниппеты",
+        "httpRequests": "HTTP-запросы",
+        "notes": "Заметки"
+      }
+    },
+    "missing": {
+      "snippet": "Сниппет не найден",
+      "httpRequest": "HTTP-запрос не найден",
+      "note": "Заметка не найдена"
+    }
+  },
   "placeholder": {
     "emptyTagList": "Добавьте теги к сниппетам, чтобы увидеть их здесь",
     "emptyNotesTagList": "Добавьте теги к заметкам, чтобы увидеть их здесь",
diff --git a/src/main/ipc/handlers/http.ts b/src/main/ipc/handlers/http.ts
new file mode 100644
index 00000000..ee91ebde
--- /dev/null
+++ b/src/main/ipc/handlers/http.ts
@@ -0,0 +1,422 @@
+import type { IncomingHttpHeaders } from 'node:http'
+import type { Dispatcher } from 'undici'
+import type {
+  HttpAuth,
+  HttpBodyType,
+  HttpExecutePayload,
+  HttpExecuteRequest,
+  HttpExecuteResult,
+  HttpFormDataEntry,
+  HttpHeaderEntry,
+  HttpMethod,
+  HttpQueryEntry,
+  HttpResponseBodyKind,
+} from '../../types/http'
+import { Buffer } from 'node:buffer'
+import { readFileSync } from 'node:fs'
+import { basename } from 'node:path'
+import { ipcMain } from 'electron'
+import { request as undiciRequest } from 'undici'
+import { interpolateHttpVariables } from '../../../shared/httpVariables'
+import { useHttpStorage } from '../../storage'
+
+const RESPONSE_BODY_CAP_BYTES = 10 * 1024 * 1024
+const DEFAULT_TIMEOUT_MS = 30_000
+
+export function interpolate(
+  template: string,
+  variables: Record<string, string>,
+): string {
+  return interpolateHttpVariables(template, variables)
+}
+
+function interpolateAuth(
+  auth: HttpAuth,
+  variables: Record<string, string>,
+): HttpAuth {
+  return {
+    type: auth.type,
+    token:
+      auth.token !== undefined
+        ? interpolate(auth.token, variables)
+        : auth.token,
+    username:
+      auth.username !== undefined
+        ? interpolate(auth.username, variables)
+        : auth.username,
+    password:
+      auth.password !== undefined
+        ? interpolate(auth.password, variables)
+        : auth.password,
+  }
+}
+
+function interpolateRequest(
+  request: HttpExecuteRequest,
+  variables: Record<string, string>,
+): HttpExecuteRequest {
+  return {
+    method: request.method,
+    url: interpolate(request.url, variables),
+    headers: request.headers.map(h => ({
+      ...h,
+      value: interpolate(h.value, variables),
+    })),
+    query: request.query.map(q => ({
+      ...q,
+      value: interpolate(q.value, variables),
+    })),
+    bodyType: request.bodyType,
+    body:
+      request.body !== null
+        ? interpolate(request.body, variables)
+        : request.body,
+    formData: request.formData.map(entry => ({
+      key: entry.key,
+      type: entry.type,
+      value:
+        entry.type === 'text'
+          ? interpolate(entry.value, variables)
+          : entry.value,
+    })),
+    auth: interpolateAuth(request.auth, variables),
+  }
+}
+
+export function applyAuth(
+  auth: HttpAuth,
+  headers: HttpHeaderEntry[],
+): HttpHeaderEntry[] {
+  if (auth.type === 'bearer' && auth.token) {
+    return [
+      ...headers,
+      { key: 'Authorization', value: `Bearer ${auth.token}` },
+    ]
+  }
+
+  if (auth.type === 'basic' && auth.username !== undefined) {
+    const credentials = Buffer.from(
+      `${auth.username}:${auth.password ?? ''}`,
+    ).toString('base64')
+    return [
+      ...headers,
+      { key: 'Authorization', value: `Basic ${credentials}` },
+    ]
+  }
+
+  return headers
+}
+
+function buildUrl(rawUrl: string, query: HttpQueryEntry[]): string {
+  const url = new URL(rawUrl)
+  if (query.length > 0) {
+    url.search = ''
+  }
+
+  for (const entry of query) {
+    if (entry.enabled === false)
+      continue
+    if (entry.key) {
+      url.searchParams.append(entry.key, entry.value)
+    }
+  }
+  return url.toString()
+}
+
+function toHeadersObject(entries: HttpHeaderEntry[]): Record<string, string> {
+  const obj: Record<string, string> = {}
+  for (const entry of entries) {
+    if (entry.enabled === false)
+      continue
+    if (entry.key) {
+      obj[entry.key] = entry.value
+    }
+  }
+  return obj
+}
+
+interface BuiltBody {
+  body: Dispatcher.DispatchOptions['body'] | FormData
+  contentType?: string
+}
+
+export function buildBody(
+  bodyType: HttpBodyType,
+  body: string | null,
+  formData: HttpFormDataEntry[],
+): BuiltBody {
+  switch (bodyType) {
+    case 'none':
+      return { body: undefined }
+    case 'json':
+      return { body: body ?? '', contentType: 'application/json' }
+    case 'text':
+      return { body: body ?? '', contentType: 'text/plain' }
+    case 'form-urlencoded':
+      return {
+        body: body ?? '',
+        contentType: 'application/x-www-form-urlencoded',
+      }
+    case 'multipart': {
+      const fd = new FormData()
+      for (const entry of formData) {
+        if (!entry.key)
+          continue
+        if (entry.type === 'file' && entry.value) {
+          const buffer = readFileSync(entry.value)
+          const blob = new Blob([buffer])
+          fd.append(entry.key, blob, basename(entry.value))
+        }
+        else {
+          fd.append(entry.key, entry.value ?? '')
+        }
+      }
+      return { body: fd }
+    }
+  }
+}
+
+function detectBodyKind(contentType: string | undefined): HttpResponseBodyKind {
+  const ct = (contentType ?? '').toLowerCase()
+  if (ct.includes('json'))
+    return 'json'
+  if (
+    ct.startsWith('text/')
+    || ct.includes('xml')
+    || ct.includes('javascript')
+    || ct.includes('html')
+    || ct.includes('x-www-form-urlencoded')
+  ) {
+    return 'text'
+  }
+  return 'binary'
+}
+
+function toHeaderEntries(headers: IncomingHttpHeaders): HttpHeaderEntry[] {
+  const entries: HttpHeaderEntry[] = []
+  for (const [key, value] of Object.entries(headers)) {
+    if (value === undefined)
+      continue
+    if (Array.isArray(value)) {
+      for (const v of value) {
+        entries.push({ key, value: v })
+      }
+    }
+    else {
+      entries.push({ key, value })
+    }
+  }
+  return entries
+}
+
+function getContentType(headers: IncomingHttpHeaders): string | undefined {
+  const value = headers['content-type']
+  if (Array.isArray(value))
+    return value[0]
+  return value
+}
+
+async function readBodyCapped(
+  body: NodeJS.ReadableStream,
+  cap: number,
+): Promise<{ buffer: Buffer, sizeBytes: number, truncated: boolean }> {
+  const chunks: Buffer[] = []
+  let received = 0
+  let truncated = false
+
+  for await (const chunk of body as AsyncIterable<Buffer>) {
+    const buf = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)
+    if (received + buf.length > cap) {
+      const remaining = cap - received
+      if (remaining > 0) {
+        chunks.push(buf.subarray(0, remaining))
+        received += remaining
+      }
+      truncated = true
+      break
+    }
+    chunks.push(buf)
+    received += buf.length
+  }
+
+  if (truncated) {
+    const maybeDestroyable = body as unknown as { destroy?: () => void }
+    if (typeof maybeDestroyable.destroy === 'function') {
+      maybeDestroyable.destroy()
+    }
+  }
+
+  return {
+    buffer: Buffer.concat(chunks),
+    sizeBytes: received,
+    truncated,
+  }
+}
+
+function resolveEnvironmentVariables(
+  environmentId: number | null,
+): Record<string, string> {
+  if (environmentId === null)
+    return {}
+  const storage = useHttpStorage()
+  const env = storage.environments
+    .getEnvironments()
+    .find(e => e.id === environmentId)
+  return env?.variables ?? {}
+}
+
+async function executeHttpRequest(
+  payload: HttpExecutePayload,
+): Promise<HttpExecuteResult> {
+  const variables = resolveEnvironmentVariables(payload.environmentId)
+  const interpolated = interpolateRequest(payload.request, variables)
+
+  const headersWithAuth = applyAuth(interpolated.auth, interpolated.headers)
+  const headersObj = toHeadersObject(headersWithAuth)
+  const built = buildBody(
+    interpolated.bodyType,
+    interpolated.body,
+    interpolated.formData,
+  )
+
+  const hasContentType = Object.keys(headersObj).some(
+    k => k.toLowerCase() === 'content-type',
+  )
+  if (!hasContentType && built.contentType) {
+    headersObj['Content-Type'] = built.contentType
+  }
+
+  let finalUrl: string
+  try {
+    finalUrl = buildUrl(interpolated.url, interpolated.query)
+  }
+  catch (error) {
+    return {
+      status: null,
+      statusText: '',
+      headers: [],
+      body: '',
+      bodyKind: 'text',
+      durationMs: 0,
+      sizeBytes: 0,
+      truncated: false,
+      error: error instanceof Error ? error.message : 'Invalid URL',
+    }
+  }
+
+  const timeoutMs = payload.timeoutMs ?? DEFAULT_TIMEOUT_MS
+  const controller = new AbortController()
+  const timer = setTimeout(() => controller.abort(), timeoutMs)
+  const startedAt = Date.now()
+  const startedAtPerf = performance.now()
+
+  try {
+    const response = await undiciRequest(finalUrl, {
+      method: interpolated.method,
+      headers: headersObj,
+      body: built.body as Dispatcher.DispatchOptions['body'],
+      signal: controller.signal,
+      maxRedirections: 5,
+    })
+
+    const { buffer, sizeBytes, truncated } = await readBodyCapped(
+      response.body as unknown as NodeJS.ReadableStream,
+      RESPONSE_BODY_CAP_BYTES,
+    )
+
+    const durationMs = Math.round(performance.now() - startedAtPerf)
+    const headerEntries = toHeaderEntries(response.headers)
+    const contentType = getContentType(response.headers)
+    const bodyKind = detectBodyKind(contentType)
+    const text = bodyKind === 'binary' ? '' : buffer.toString('utf-8')
+
+    const result: HttpExecuteResult = {
+      status: response.statusCode,
+      statusText: '',
+      headers: headerEntries,
+      body: text,
+      bodyKind,
+      durationMs,
+      sizeBytes,
+      truncated,
+    }
+
+    appendHistory(
+      payload,
+      finalUrl,
+      interpolated.method,
+      response.statusCode,
+      durationMs,
+      sizeBytes,
+      startedAt,
+    )
+
+    return result
+  }
+  catch (error) {
+    const durationMs = Math.round(performance.now() - startedAtPerf)
+    const message = error instanceof Error ? error.message : String(error)
+    const isAbort = error instanceof Error && error.name === 'AbortError'
+
+    appendHistory(
+      payload,
+      finalUrl,
+      interpolated.method,
+      null,
+      durationMs,
+      0,
+      startedAt,
+      isAbort ? `Timeout after ${timeoutMs}ms` : message,
+    )
+
+    return {
+      status: null,
+      statusText: '',
+      headers: [],
+      body: '',
+      bodyKind: 'text',
+      durationMs,
+      sizeBytes: 0,
+      truncated: false,
+      error: isAbort ? `Timeout after ${timeoutMs}ms` : message,
+    }
+  }
+  finally {
+    clearTimeout(timer)
+  }
+}
+
+function appendHistory(
+  payload: HttpExecutePayload,
+  url: string,
+  method: HttpMethod,
+  status: number | null,
+  durationMs: number,
+  sizeBytes: number,
+  requestedAt: number,
+  error?: string,
+): void {
+  try {
+    const storage = useHttpStorage()
+    storage.history.appendEntry({
+      requestId: payload.requestId,
+      method,
+      url,
+      status,
+      durationMs,
+      sizeBytes,
+      requestedAt,
+      ...(error ? { error } : {}),
+    })
+  }
+  catch {
+    // history is best-effort; never fail the response
+  }
+}
+
+export function registerHttpHandlers(): void {
+  ipcMain.handle(
+    'spaces:http:execute',
+    async (_, payload: HttpExecutePayload) => executeHttpRequest(payload),
+  )
+}
diff --git a/src/main/ipc/handlers/system.ts b/src/main/ipc/handlers/system.ts
index dc874232..6734b4a6 100644
--- a/src/main/ipc/handlers/system.ts
+++ b/src/main/ipc/handlers/system.ts
@@ -5,6 +5,10 @@ import {
   refreshCryptoRatesForced,
   refreshFiatRatesForced,
 } from '../../currencyRates'
+import {
+  getHttpPaths,
+  getHttpRuntimeCache,
+} from '../../storage/providers/markdown/http'
 import {
   findNoteById,
   getNotesFolderPathById,
@@ -75,6 +79,31 @@ export function registerSystemHandlers() {
     return true
   })
 
+  ipcMain.handle(
+    'system:show-http-request-in-file-manager',
+    (_, requestId: number) => {
+      if (!Number.isFinite(requestId) || requestId <= 0) {
+        return false
+      }
+
+      const httpPaths = getHttpPaths(getVaultPath())
+      const cache = getHttpRuntimeCache(httpPaths)
+      const request = cache.requestById.get(requestId)
+
+      if (!request) {
+        return false
+      }
+
+      const requestAbsolutePath = path.join(
+        httpPaths.httpRoot,
+        request.filePath,
+      )
+      shell.showItemInFolder(requestAbsolutePath)
+
+      return true
+    },
+  )
+
   ipcMain.handle(
     'system:show-notes-folder-in-file-manager',
     (_, folderId: number) => {
diff --git a/src/main/ipc/index.ts b/src/main/ipc/index.ts
index 1a1e4d90..da985569 100644
--- a/src/main/ipc/index.ts
+++ b/src/main/ipc/index.ts
@@ -7,6 +7,7 @@ import { store } from '../store'
 import { isSqliteFile } from '../utils'
 import { registerDialogHandlers } from './handlers/dialog'
 import { registerFsHandlers } from './handlers/fs'
+import { registerHttpHandlers } from './handlers/http'
 import { registerPrettierHandlers } from './handlers/prettier'
 import { registerSpacesHandlers } from './handlers/spaces'
 import { registerSystemHandlers } from './handlers/system'
@@ -25,6 +26,7 @@ export function registerIPC() {
   registerFsHandlers()
   registerThemeHandlers()
   registerSpacesHandlers()
+  registerHttpHandlers()
 
   ipcMain.on('main-menu:update-context', (_, payload: MainMenuContext) => {
     updateMainMenu(payload)
diff --git a/src/main/menu/__tests__/main.test.ts b/src/main/menu/__tests__/main.test.ts
index 8ffdb630..2a99777b 100644
--- a/src/main/menu/__tests__/main.test.ts
+++ b/src/main/menu/__tests__/main.test.ts
@@ -68,6 +68,7 @@ describe('createMainMenu', () => {
       editor: {
         kind: 'code',
         noteMode: null,
+        canSendRequest: false,
         canFormat: true,
         canPreviewCode: true,
         isCodePreviewShown: false,
@@ -130,6 +131,7 @@ describe('createMainMenu', () => {
       editor: {
         kind: null,
         noteMode: null,
+        canSendRequest: false,
         canFormat: false,
         canPreviewCode: false,
         isCodePreviewShown: false,
@@ -175,6 +177,7 @@ describe('createMainMenu', () => {
       editor: {
         kind: null,
         noteMode: null,
+        canSendRequest: false,
         canFormat: false,
         canPreviewCode: false,
         isCodePreviewShown: false,
@@ -217,4 +220,61 @@ describe('createMainMenu', () => {
     expect(labels).not.toContain('menu:app.devtools')
     expect(labels).not.toContain('menu:app.mathNotebook')
   })
+
+  it('renders send request in the editor menu for http space', async () => {
+    const { createMainMenu } = await import('../main')
+
+    const context: MainMenuContext = {
+      file: {
+        primaryAction: null,
+        secondaryAction: null,
+        canCreateFragment: false,
+      },
+      view: {
+        layoutMode: 'all-panels',
+        layoutModes: ['all-panels', 'list-editor', 'editor-only'],
+        canToggleCompactMode: false,
+        canToggleMindmap: false,
+        isCompactMode: false,
+        isMindmapShown: false,
+        canTogglePresentation: false,
+        isPresentationShown: false,
+      },
+      editor: {
+        kind: 'http',
+        noteMode: null,
+        canSendRequest: true,
+        canFormat: false,
+        canPreviewCode: false,
+        isCodePreviewShown: false,
+        canPreviewJson: false,
+        isJsonPreviewShown: false,
+        canAdjustFontSize: false,
+      },
+    }
+
+    createMainMenu(context)
+
+    const template = buildFromTemplate.mock.calls[0]?.[0] as Array<{
+      label?: string
+      submenu?: Array<{
+        label?: string
+        accelerator?: string
+        enabled?: boolean
+      }>
+    }>
+    const fileMenu = template.find(item => item.label === 'menu:file.label')
+    const editorMenu = template.find(
+      item => item.label === 'menu:editor.label',
+    )
+    const sendRequestItem = editorMenu?.submenu?.find(
+      item => item.label === 'menu:editor.sendRequest',
+    )
+
+    expect(fileMenu).toBeUndefined()
+    expect(sendRequestItem).toMatchObject({
+      accelerator: 'CommandOrControl+Enter',
+      enabled: true,
+    })
+  })
 })
diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts
index 8a364d79..ae477023 100644
--- a/src/main/menu/main.ts
+++ b/src/main/menu/main.ts
@@ -44,6 +44,7 @@ const defaultMainMenuContext: MainMenuContext = {
   editor: {
     kind: null,
     noteMode: null,
+    canSendRequest: false,
     canFormat: false,
     canPreviewCode: false,
     isCodePreviewShown: false,
@@ -522,6 +523,15 @@ function createEditorMenuItems(context: MainMenuContext): MenuConfig[] {
     })
   }
 
+  if (context.editor.kind === 'http') {
+    items.push({
+      label: i18n.t('menu:editor.sendRequest'),
+      enabled: context.editor.canSendRequest,
+      click: () => send('main-menu:send-http-request'),
+      accelerator: 'CommandOrControl+Enter',
+    })
+  }
+
   const notesModeItems = createNotesEditorModeItems(context)
   if (notesModeItems.length) {
     if (items.length) {
diff --git a/src/main/storage/contracts.ts b/src/main/storage/contracts.ts
index e85b635f..f4365adf 100644
--- a/src/main/storage/contracts.ts
+++ b/src/main/storage/contracts.ts
@@ -1,3 +1,16 @@
+import type {
+  HttpAuth,
+  HttpBodyType,
+  HttpEnvironmentRecord,
+  HttpFolderRecord,
+  HttpFolderTreeRecord,
+  HttpFormDataEntry,
+  HttpHeaderEntry,
+  HttpHistoryRecord,
+  HttpMethod,
+  HttpQueryEntry,
+  HttpRequestRecord,
+} from './providers/markdown/http/runtime/types'
 import type {
   NotesFolderRecord,
   NotesFolderTreeRecord,
@@ -313,3 +326,127 @@ export interface NoteTagsStorage {
   getTags: () => NoteTagRecord[]
   updateTag: (id: number, name: string) => { notFound: boolean }
 }
+
+// --- HTTP Space Contracts ---
+
+export interface HttpFolderCreateInput {
+  name: string
+  icon?: string | null
+  parentId?: number | null
+}
+
+export interface HttpFolderUpdateInput {
+  name?: string
+  icon?: string | null
+  parentId?: number | null
+  isOpen?: number
+  orderIndex?: number
+}
+
+export interface HttpFolderUpdateResult {
+  invalidInput: boolean
+  notFound: boolean
+}
+
+export interface HttpRequestsQueryInput {
+  search?: string
+}
+
+export interface HttpRequestCreateInput {
+  name: string
+  folderId?: number | null
+  method?: HttpMethod
+  url?: string
+}
+
+export interface HttpRequestUpdateInput {
+  name?: string
+  folderId?: number | null
+  method?: HttpMethod
+  url?: string
+  headers?: HttpHeaderEntry[]
+  query?: HttpQueryEntry[]
+  bodyType?: HttpBodyType
+  body?: string | null
+  formData?: HttpFormDataEntry[]
+  auth?: HttpAuth
+  description?: string
+}
+
+export interface HttpRequestUpdateResult {
+  invalidInput: boolean
+  notFound: boolean
+}
+
+export interface HttpEnvironmentCreateInput {
+  name: string
+  variables?: Record<string, string>
+}
+
+export interface HttpEnvironmentUpdateInput {
+  name?: string
+  variables?: Record<string, string>
+}
+
+export interface HttpEnvironmentUpdateResult {
+  invalidInput: boolean
+  notFound: boolean
+}
+
+export interface HttpHistoryAppendInput {
+  requestId: number | null
+  method: HttpMethod
+  url: string
+  status: number | null
+  durationMs: number
+  sizeBytes: number
+  requestedAt: number
+  error?: string
+}
+
+export interface HttpFoldersStorage {
+  createFolder: (input: HttpFolderCreateInput) => { id: number }
+  deleteFolder: (id: number) => { deleted: boolean }
+  getFolders: () => HttpFolderRecord[]
+  getFoldersTree: () => HttpFolderTreeRecord[]
+  updateFolder: (
+    id: number,
+    input: HttpFolderUpdateInput,
+  ) => HttpFolderUpdateResult
+}
+
+export interface HttpRequestsStorage {
+  createRequest: (input: HttpRequestCreateInput) => { id: number }
+  deleteRequest: (id: number) => { deleted: boolean }
+  getRequestById: (id: number) => HttpRequestRecord | null
+  getRequests: (query?: HttpRequestsQueryInput) => HttpRequestRecord[]
+  updateRequest: (
+    id: number,
+    input: HttpRequestUpdateInput,
+  ) => HttpRequestUpdateResult
+}
+
+export interface HttpEnvironmentsStorage {
+  createEnvironment: (input: HttpEnvironmentCreateInput) => { id: number }
+  deleteEnvironment: (id: number) => { deleted: boolean }
+  getActiveEnvironmentId: () => number | null
+  getEnvironments: () => HttpEnvironmentRecord[]
+  setActiveEnvironment: (id: number | null) => { notFound: boolean }
+  updateEnvironment: (
+    id: number,
+    input: HttpEnvironmentUpdateInput,
+  ) => HttpEnvironmentUpdateResult
+}
+
+export interface HttpHistoryStorage {
+  appendEntry: (input: HttpHistoryAppendInput) => { id: number }
+  clear: () => void
+  getEntries: () => HttpHistoryRecord[]
+}
+
+export interface HttpStorageProvider {
+  environments: HttpEnvironmentsStorage
+  folders: HttpFoldersStorage
+  history: HttpHistoryStorage
+  requests: HttpRequestsStorage
+}
diff --git a/src/main/storage/index.ts b/src/main/storage/index.ts
index c7775c32..2f0dffbd 100644
--- a/src/main/storage/index.ts
+++ b/src/main/storage/index.ts
@@ -1,13 +1,19 @@
-import type { NotesStorageProvider, StorageProvider } from './contracts'
+import type {
+  HttpStorageProvider,
+  NotesStorageProvider,
+  StorageProvider,
+} from './contracts'
 import {
   createMarkdownStorageProvider,
   startMarkdownWatcher,
   stopMarkdownWatcher,
 } from './providers/markdown'
+import { createHttpStorageProvider } from './providers/markdown/http'
 import { createNotesStorageProvider } from './providers/markdown/notes'
 
 const markdownStorageProvider = createMarkdownStorageProvider()
 const notesStorageProvider = createNotesStorageProvider()
+const httpStorageProvider = createHttpStorageProvider()
 
 export function useStorage(): StorageProvider {
   return markdownStorageProvider
@@ -17,4 +23,8 @@ export function useNotesStorage(): NotesStorageProvider {
   return notesStorageProvider
 }
 
+export function useHttpStorage(): HttpStorageProvider {
+  return httpStorageProvider
+}
+
 export { startMarkdownWatcher, stopMarkdownWatcher }
diff --git a/src/main/storage/providers/markdown/__tests__/watcher.test.ts b/src/main/storage/providers/markdown/__tests__/watcher.test.ts
index 95f90987..289585b1 100644
--- a/src/main/storage/providers/markdown/__tests__/watcher.test.ts
+++ b/src/main/storage/providers/markdown/__tests__/watcher.test.ts
@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
   getWatchPathSpaceId,
   isCodeWatchPath,
+  isHttpWatchPath,
   isMathWatchPath,
   isNotesWatchPath,
   normalizeRelativeWatchPath,
@@ -31,6 +32,16 @@ describe('watcher routing', () => {
     expect(getWatchPathSpaceId('math/.state.yaml')).toBe('math')
   })
 
+  it('keeps http state and request files observable', () => {
+    expect(shouldIgnoreWatchPath(vaultRoot, '/vault/http/.state.yaml')).toBe(
+      false,
+    )
+    expect(
+      shouldIgnoreWatchPath(vaultRoot, '/vault/http/API/List posts.md'),
+    ).toBe(false)
+    expect(getWatchPathSpaceId('http/API/List posts.md')).toBe('http')
+  })
+
   it('drops unknown vault-root entries from space routing', () => {
     expect(getWatchPathSpaceId('README.md')).toBe(null)
     expect(getWatchPathSpaceId('random-dir/file.md')).toBe(null)
@@ -52,11 +63,13 @@ describe('watcher routing', () => {
     )
   })
 
-  it('recognizes code, notes and math space paths', () => {
+  it('recognizes code, notes, math and http space paths', () => {
     expect(isCodeWatchPath('code/demo.md')).toBe(true)
     expect(isCodeWatchPath('notes/demo.md')).toBe(false)
     expect(isNotesWatchPath('notes/demo.md')).toBe(true)
     expect(isMathWatchPath('math/.state.yaml')).toBe(true)
+    expect(isHttpWatchPath('http/API/List posts.md')).toBe(true)
+    expect(isHttpWatchPath('notes/demo.md')).toBe(false)
   })
 
   it('extracts code-relative paths only from code space entries', () => {
diff --git a/src/main/storage/providers/markdown/http/index.ts b/src/main/storage/providers/markdown/http/index.ts
new file mode 100644
index 00000000..9033f3b4
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/index.ts
@@ -0,0 +1,8 @@
+export { peekHttpRuntimeCache } from './runtime/constants'
+export { getHttpPaths } from './runtime/paths'
+export {
+  getHttpRuntimeCache,
+  resetHttpRuntimeCache,
+  syncHttpRuntimeWithDisk,
+} from './runtime/sync'
+export { createHttpStorageProvider } from './storages'
diff --git a/src/main/storage/providers/markdown/http/runtime/constants.ts b/src/main/storage/providers/markdown/http/runtime/constants.ts
new file mode 100644
index 00000000..25763e4c
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/constants.ts
@@ -0,0 +1,12 @@
+import type { HttpRuntimeCache } from './types'
+
+export const HTTP_STATE_FILE_NAME = '.state.yaml'
+export const HTTP_HISTORY_CAP = 200
+
+export const httpRuntimeRef: { cache: HttpRuntimeCache | null } = {
+  cache: null,
+}
+
+export function peekHttpRuntimeCache(): HttpRuntimeCache | null {
+  return httpRuntimeRef.cache
+}
diff --git a/src/main/storage/providers/markdown/http/runtime/index.ts b/src/main/storage/providers/markdown/http/runtime/index.ts
new file mode 100644
index 00000000..67d596c3
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/index.ts
@@ -0,0 +1,6 @@
+export * from './constants'
+export * from './parser'
+export * from './paths'
+export * from './state'
+export * from './sync'
+export * from './types'
diff --git a/src/main/storage/providers/markdown/http/runtime/parser.ts b/src/main/storage/providers/markdown/http/runtime/parser.ts
new file mode 100644
index 00000000..a566a66b
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/parser.ts
@@ -0,0 +1,238 @@
+import type {
+  HttpAuth,
+  HttpBodyType,
+  HttpFormDataEntry,
+  HttpHeaderEntry,
+  HttpMethod,
+  HttpQueryEntry,
+  HttpRequestFrontmatter,
+  HttpRequestRecord,
+} from './types'
+import path from 'node:path'
+import fs from 'fs-extra'
+import yaml from 'js-yaml'
+
+const FRONTMATTER_RE = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?([\s\S]*)$/
+const HTTP_METHODS: HttpMethod[] = [
+  'GET',
+  'POST',
+  'PUT',
+  'PATCH',
+  'DELETE',
+  'HEAD',
+  'OPTIONS',
+]
+const HTTP_BODY_TYPES: HttpBodyType[] = [
+  'none',
+  'json',
+  'text',
+  'form-urlencoded',
+  'multipart',
+]
+
+function splitFrontmatter(source: string): {
+  body: string
+  frontmatter: HttpRequestFrontmatter
+  hasFrontmatter: boolean
+} {
+  const match = source.match(FRONTMATTER_RE)
+
+  if (!match) {
+    return { body: source, frontmatter: {}, hasFrontmatter: false }
+  }
+
+  const parsed = yaml.load(match[1])
+  return {
+    body: match[2] || '',
+    frontmatter:
+      parsed && typeof parsed === 'object'
+        ? (parsed as HttpRequestFrontmatter)
+        : {},
+    hasFrontmatter: true,
+  }
+}
+
+function normalizeMethod(value: unknown): HttpMethod {
+  if (typeof value !== 'string') {
+    return 'GET'
+  }
+
+  const upper = value.toUpperCase() as HttpMethod
+  return HTTP_METHODS.includes(upper) ? upper : 'GET'
+}
+
+function normalizeBodyType(value: unknown): HttpBodyType {
+  if (typeof value !== 'string') {
+    return 'none'
+  }
+
+  return HTTP_BODY_TYPES.includes(value as HttpBodyType)
+    ? (value as HttpBodyType)
+    : 'none'
+}
+
+function normalizeKeyValueEntries<T extends { key: string, value: string }>(
+  raw: unknown,
+  extra?: (entry: Record<string, unknown>) => Partial<T>,
+): T[] {
+  if (!Array.isArray(raw)) {
+    return []
+  }
+
+  return raw
+    .filter((entry): entry is Record<string, unknown> =>
+      Boolean(entry && typeof entry === 'object'),
+    )
+    .map((entry) => {
+      const key = typeof entry.key === 'string' ? entry.key : ''
+      const value = typeof entry.value === 'string' ? entry.value : ''
+      return { key, value, ...(extra ? extra(entry) : {}) } as T
+    })
+}
+
+function pickKvExtras(entry: Record<string, unknown>): {
+  description?: string
+  enabled?: boolean
+} {
+  const extras: { description?: string, enabled?: boolean } = {}
+  if (typeof entry.description === 'string') {
+    extras.description = entry.description
+  }
+  if (typeof entry.enabled === 'boolean') {
+    extras.enabled = entry.enabled
+  }
+  return extras
+}
+
+function normalizeHeaders(raw: unknown): HttpHeaderEntry[] {
+  return normalizeKeyValueEntries<HttpHeaderEntry>(raw, pickKvExtras)
+}
+
+function normalizeQuery(raw: unknown): HttpQueryEntry[] {
+  return normalizeKeyValueEntries<HttpQueryEntry>(raw, pickKvExtras)
+}
+
+function normalizeFormData(raw: unknown): HttpFormDataEntry[] {
+  return normalizeKeyValueEntries<HttpFormDataEntry>(raw, (entry) => {
+    const type = entry.type === 'file' ? 'file' : 'text'
+    return { type }
+  })
+}
+
+function normalizeAuth(raw: unknown): HttpAuth {
+  if (!raw || typeof raw !== 'object') {
+    return { type: 'none' }
+  }
+
+  const data = raw as Record<string, unknown>
+  const type
+    = data.type === 'bearer' || data.type === 'basic' ? data.type : 'none'
+
+  const auth: HttpAuth = { type }
+  if (typeof data.token === 'string')
+    auth.token = data.token
+  if (typeof data.username === 'string')
+    auth.username = data.username
+  if (typeof data.password === 'string')
+    auth.password = data.password
+
+  return auth
+}
+
+export interface ParsedRequestFile {
+  body: string
+  description: string
+  frontmatter: HttpRequestFrontmatter
+  hasFrontmatter: boolean
+  normalized: {
+    method: HttpMethod
+    url: string
+    headers: HttpHeaderEntry[]
+    query: HttpQueryEntry[]
+    bodyType: HttpBodyType
+    body: string | null
+    formData: HttpFormDataEntry[]
+    auth: HttpAuth
+  }
+}
+
+export function parseRequestFile(source: string): ParsedRequestFile {
+  const { body, frontmatter, hasFrontmatter } = splitFrontmatter(source)
+  const fm = frontmatter
+
+  return {
+    body,
+    description: body,
+    frontmatter: fm,
+    hasFrontmatter,
+    normalized: {
+      method: normalizeMethod(fm.method),
+      url: typeof fm.url === 'string' ? fm.url : '',
+      headers: normalizeHeaders(fm.headers),
+      query: normalizeQuery(fm.query),
+      bodyType: normalizeBodyType(fm.bodyType),
+      body: typeof fm.body === 'string' ? fm.body : null,
+      formData: normalizeFormData(fm.formData),
+      auth: normalizeAuth(fm.auth),
+    },
+  }
+}
+
+export function serializeRequestFile(record: HttpRequestRecord): string {
+  const frontmatter: HttpRequestFrontmatter = {
+    id: record.id,
+    name: record.name,
+    folderId: record.folderId,
+    method: record.method,
+    url: record.url,
+    headers: record.headers,
+    query: record.query,
+    bodyType: record.bodyType,
+    body: record.body,
+    formData: record.formData,
+    auth: record.auth,
+    createdAt: record.createdAt,
+    updatedAt: record.updatedAt,
+  }
+
+  const text = yaml
+    .dump(frontmatter, { lineWidth: -1, noRefs: true, sortKeys: false })
+    .trim()
+
+  if (!record.description) {
+    return `---\n${text}\n---\n`
+  }
+
+  return `---\n${text}\n---\n${record.description}`
+}
+
+export function readRequestFile(
+  httpRoot: string,
+  filePath: string,
+): ParsedRequestFile | null {
+  const absolutePath = path.join(httpRoot, filePath)
+  if (!fs.pathExistsSync(absolutePath)) {
+    return null
+  }
+
+  const source = fs.readFileSync(absolutePath, 'utf8')
+  return parseRequestFile(source)
+}
+
+export function writeRequestFile(
+  httpRoot: string,
+  record: HttpRequestRecord,
+): void {
+  const absolutePath = path.join(httpRoot, record.filePath)
+  const next = serializeRequestFile(record)
+
+  if (fs.pathExistsSync(absolutePath)) {
+    const current = fs.readFileSync(absolutePath, 'utf8')
+    if (current === next) {
+      return
+    }
+  }
+
+  fs.ensureDirSync(path.dirname(absolutePath))
+  fs.writeFileSync(absolutePath, next, 'utf8')
+}
diff --git a/src/main/storage/providers/markdown/http/runtime/paths.ts b/src/main/storage/providers/markdown/http/runtime/paths.ts
new file mode 100644
index 00000000..560bad97
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/paths.ts
@@ -0,0 +1,14 @@
+import type { HttpPaths } from './types'
+import path from 'node:path'
+import { HTTP_SPACE_ID } from '../../runtime/constants'
+import { getSpaceDirPath } from '../../runtime/spaces'
+import { HTTP_STATE_FILE_NAME } from './constants'
+
+export function getHttpPaths(vaultPath: string): HttpPaths {
+  const httpRoot = getSpaceDirPath(vaultPath, HTTP_SPACE_ID)
+
+  return {
+    httpRoot,
+    statePath: path.join(httpRoot, HTTP_STATE_FILE_NAME),
+  }
+}
diff --git a/src/main/storage/providers/markdown/http/runtime/state.ts b/src/main/storage/providers/markdown/http/runtime/state.ts
new file mode 100644
index 00000000..89ec199f
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/state.ts
@@ -0,0 +1,106 @@
+import type {
+  HttpCounters,
+  HttpFolderRecord,
+  HttpPaths,
+  HttpState,
+  HttpStateFile,
+} from './types'
+import fs from 'fs-extra'
+import { readSpaceState, writeSpaceState } from '../../runtime/spaceState'
+import { HTTP_HISTORY_CAP } from './constants'
+
+const STATE_VERSION = 1
+
+export function createDefaultHttpState(): HttpState {
+  return {
+    version: STATE_VERSION,
+    counters: {
+      folderId: 0,
+      requestId: 0,
+      environmentId: 0,
+      historyId: 0,
+    },
+    folders: [],
+    requests: [],
+    environments: [],
+    activeEnvironmentId: null,
+    history: [],
+  }
+}
+
+function normalizeCounters(
+  raw: Partial<HttpCounters> | undefined,
+): HttpCounters {
+  const defaults = createDefaultHttpState().counters
+  return {
+    folderId:
+      typeof raw?.folderId === 'number' ? raw.folderId : defaults.folderId,
+    requestId:
+      typeof raw?.requestId === 'number' ? raw.requestId : defaults.requestId,
+    environmentId:
+      typeof raw?.environmentId === 'number'
+        ? raw.environmentId
+        : defaults.environmentId,
+    historyId:
+      typeof raw?.historyId === 'number' ? raw.historyId : defaults.historyId,
+  }
+}
+
+function normalizeFolders(raw: HttpStateFile['folders']): HttpFolderRecord[] {
+  if (!Array.isArray(raw))
+    return []
+
+  return raw.map(folder => ({
+    ...folder,
+    icon:
+      folder.icon === null
+        ? null
+        : typeof folder.icon === 'string'
+          ? folder.icon
+          : null,
+  }))
+}
+
+export function ensureHttpStateFile(paths: HttpPaths): void {
+  fs.ensureDirSync(paths.httpRoot)
+
+  if (!fs.pathExistsSync(paths.statePath)) {
+    writeSpaceState(paths.statePath, createDefaultHttpState())
+  }
+}
+
+export function loadHttpState(paths: HttpPaths): HttpState {
+  ensureHttpStateFile(paths)
+
+  const raw = readSpaceState<HttpStateFile>(paths.statePath)
+  const defaults = createDefaultHttpState()
+
+  if (!raw) {
+    return defaults
+  }
+
+  return {
+    version: typeof raw.version === 'number' ? raw.version : defaults.version,
+    counters: normalizeCounters(raw.counters),
+    folders: normalizeFolders(raw.folders),
+    requests: Array.isArray(raw.requests) ? raw.requests : [],
+    environments: Array.isArray(raw.environments) ? raw.environments : [],
+    activeEnvironmentId:
+      typeof raw.activeEnvironmentId === 'number'
+        ? raw.activeEnvironmentId
+        : null,
+    history: Array.isArray(raw.history)
+      ? raw.history.slice(-HTTP_HISTORY_CAP)
+      : [],
+  }
+}
+
+export function saveHttpState(paths: HttpPaths, state: HttpState): void {
+  state.version = Math.max(state.version, STATE_VERSION)
+
+  if (state.history.length > HTTP_HISTORY_CAP) {
+    state.history = state.history.slice(-HTTP_HISTORY_CAP)
+  }
+
+  writeSpaceState(paths.statePath, state)
+}
diff --git a/src/main/storage/providers/markdown/http/runtime/sync.ts b/src/main/storage/providers/markdown/http/runtime/sync.ts
new file mode 100644
index 00000000..3427c3c4
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/sync.ts
@@ -0,0 +1,268 @@
+import type {
+  HttpFolderRecord,
+  HttpPaths,
+  HttpRequestRecord,
+  HttpRuntimeCache,
+  HttpState,
+} from './types'
+import path from 'node:path'
+import fs from 'fs-extra'
+import { toPosixPath } from '../../runtime/shared/path'
+import { HTTP_STATE_FILE_NAME, httpRuntimeRef } from './constants'
+import {
+  parseRequestFile,
+  serializeRequestFile,
+  writeRequestFile,
+} from './parser'
+import { ensureHttpStateFile, loadHttpState, saveHttpState } from './state'
+
+const SKIP_FILES = new Set([HTTP_STATE_FILE_NAME])
+
+interface DiskWalkResult {
+  folderRelativePaths: string[]
+  requestRelativePaths: string[]
+}
+
+function walkHttpDir(rootPath: string, currentPath = rootPath): DiskWalkResult {
+  const result: DiskWalkResult = {
+    folderRelativePaths: [],
+    requestRelativePaths: [],
+  }
+
+  if (!fs.pathExistsSync(currentPath)) {
+    return result
+  }
+
+  const entries = fs.readdirSync(currentPath, { withFileTypes: true })
+
+  for (const entry of entries) {
+    if (entry.name.startsWith('.')) {
+      continue
+    }
+
+    const absolutePath = path.join(currentPath, entry.name)
+
+    if (entry.isDirectory()) {
+      const relativePath = toPosixPath(path.relative(rootPath, absolutePath))
+      result.folderRelativePaths.push(relativePath)
+      const nested = walkHttpDir(rootPath, absolutePath)
+      result.folderRelativePaths.push(...nested.folderRelativePaths)
+      result.requestRelativePaths.push(...nested.requestRelativePaths)
+      continue
+    }
+
+    if (
+      entry.isFile()
+      && entry.name.endsWith('.md')
+      && !SKIP_FILES.has(entry.name)
+    ) {
+      const relativePath = toPosixPath(path.relative(rootPath, absolutePath))
+      result.requestRelativePaths.push(relativePath)
+    }
+  }
+
+  return result
+}
+
+function reconcileFolders(
+  state: HttpState,
+  folderRelativePaths: string[],
+): Map<string, number> {
+  const existingByPath = new Map<string, HttpFolderRecord>()
+  const existingPathById = new Map<number, string>()
+
+  // Build current path → folder map from existing state
+  function buildPath(
+    folder: HttpFolderRecord,
+    lookup: Map<number, HttpFolderRecord>,
+  ): string {
+    const segments: string[] = []
+    let current: HttpFolderRecord | undefined = folder
+    while (current) {
+      segments.unshift(current.name)
+      current
+        = current.parentId !== null ? lookup.get(current.parentId) : undefined
+    }
+    return segments.join('/')
+  }
+
+  const folderById = new Map(
+    state.folders.map(folder => [folder.id, folder]),
+  )
+  for (const folder of state.folders) {
+    const fullPath = buildPath(folder, folderById)
+    existingByPath.set(fullPath, folder)
+    existingPathById.set(folder.id, fullPath)
+  }
+
+  const now = Date.now()
+  const sortedDiskPaths = [...folderRelativePaths].sort(
+    (a, b) => a.split('/').length - b.split('/').length,
+  )
+
+  const nextFolders: HttpFolderRecord[] = []
+  const folderIdByPath = new Map<string, number>()
+
+  for (const relativePath of sortedDiskPaths) {
+    const segments = relativePath.split('/')
+    const name = segments[segments.length - 1]
+    const parentPath = segments.slice(0, -1).join('/')
+    const parentId = parentPath
+      ? (folderIdByPath.get(parentPath) ?? null)
+      : null
+
+    const existing = existingByPath.get(relativePath)
+    if (existing) {
+      const updated: HttpFolderRecord = {
+        ...existing,
+        name,
+        parentId,
+      }
+      nextFolders.push(updated)
+      folderIdByPath.set(relativePath, updated.id)
+      continue
+    }
+
+    state.counters.folderId += 1
+    const id = state.counters.folderId
+    nextFolders.push({
+      id,
+      name,
+      icon: null,
+      parentId,
+      isOpen: 0,
+      orderIndex: nextFolders.length,
+      createdAt: now,
+      updatedAt: now,
+    })
+    folderIdByPath.set(relativePath, id)
+  }
+
+  state.folders = nextFolders
+  return folderIdByPath
+}
+
+function reconcileRequests(
+  paths: HttpPaths,
+  state: HttpState,
+  requestRelativePaths: string[],
+  folderIdByPath: Map<string, number>,
+): HttpRequestRecord[] {
+  const existingByPath = new Map(
+    state.requests.map(item => [item.filePath, item.id]),
+  )
+  const usedIds = new Set<number>()
+  const records: HttpRequestRecord[] = []
+  const indexEntries: HttpState['requests'] = []
+  const now = Date.now()
+
+  for (const relativePath of requestRelativePaths) {
+    const absolutePath = path.join(paths.httpRoot, relativePath)
+    const source = fs.readFileSync(absolutePath, 'utf8')
+    const parsed = parseRequestFile(source)
+    const fmId = parsed.frontmatter.id
+
+    let id = existingByPath.get(relativePath)
+    let needsRewrite = !parsed.hasFrontmatter
+
+    if (!id) {
+      if (typeof fmId === 'number' && fmId > 0 && !usedIds.has(fmId)) {
+        id = fmId
+      }
+      else {
+        state.counters.requestId += 1
+        id = state.counters.requestId
+        needsRewrite = true
+      }
+    }
+
+    if (id > state.counters.requestId) {
+      state.counters.requestId = id
+    }
+    usedIds.add(id)
+
+    const dirPath = path.posix.dirname(relativePath)
+    const folderId
+      = dirPath && dirPath !== '.' ? (folderIdByPath.get(dirPath) ?? null) : null
+
+    const fileName = path.posix.basename(relativePath, '.md')
+    const fmCreatedAt = parsed.frontmatter.createdAt
+    const fmUpdatedAt = parsed.frontmatter.updatedAt
+
+    const record: HttpRequestRecord = {
+      id,
+      name: parsed.frontmatter.name || fileName,
+      folderId,
+      method: parsed.normalized.method,
+      url: parsed.normalized.url,
+      headers: parsed.normalized.headers,
+      query: parsed.normalized.query,
+      bodyType: parsed.normalized.bodyType,
+      body: parsed.normalized.body,
+      formData: parsed.normalized.formData,
+      auth: parsed.normalized.auth,
+      description: parsed.description,
+      filePath: relativePath,
+      createdAt: typeof fmCreatedAt === 'number' ? fmCreatedAt : now,
+      updatedAt: typeof fmUpdatedAt === 'number' ? fmUpdatedAt : now,
+    }
+
+    if (needsRewrite || serializeRequestFile(record) !== source) {
+      writeRequestFile(paths.httpRoot, record)
+    }
+
+    records.push(record)
+    indexEntries.push({ id, filePath: relativePath })
+  }
+
+  state.requests = indexEntries
+  return records
+}
+
+function buildRuntimeCache(
+  paths: HttpPaths,
+  state: HttpState,
+  records: HttpRequestRecord[],
+): HttpRuntimeCache {
+  return {
+    paths,
+    state,
+    requestById: new Map(records.map(record => [record.id, record])),
+    folderById: new Map(state.folders.map(folder => [folder.id, folder])),
+  }
+}
+
+export function syncHttpRuntimeWithDisk(paths: HttpPaths): HttpRuntimeCache {
+  ensureHttpStateFile(paths)
+  const state = loadHttpState(paths)
+
+  const walk = walkHttpDir(paths.httpRoot)
+  const folderIdByPath = reconcileFolders(state, walk.folderRelativePaths)
+  const records = reconcileRequests(
+    paths,
+    state,
+    walk.requestRelativePaths,
+    folderIdByPath,
+  )
+
+  saveHttpState(paths, state)
+
+  const cache = buildRuntimeCache(paths, state, records)
+  httpRuntimeRef.cache = cache
+  return cache
+}
+
+export function getHttpRuntimeCache(paths: HttpPaths): HttpRuntimeCache {
+  if (
+    httpRuntimeRef.cache
+    && httpRuntimeRef.cache.paths.httpRoot === paths.httpRoot
+  ) {
+    return httpRuntimeRef.cache
+  }
+
+  return syncHttpRuntimeWithDisk(paths)
+}
+
+export function resetHttpRuntimeCache(): void {
+  httpRuntimeRef.cache = null
+}
diff --git a/src/main/storage/providers/markdown/http/runtime/types.ts b/src/main/storage/providers/markdown/http/runtime/types.ts
new file mode 100644
index 00000000..93982432
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/runtime/types.ts
@@ -0,0 +1,131 @@
+import type {
+  HttpAuth,
+  HttpBodyType,
+  HttpFormDataEntry,
+  HttpHeaderEntry,
+  HttpMethod,
+  HttpQueryEntry,
+} from '../../../../../types/http'
+
+export type {
+  HttpAuth,
+  HttpAuthType,
+  HttpBodyType,
+  HttpFormDataEntry,
+  HttpHeaderEntry,
+  HttpMethod,
+  HttpQueryEntry,
+} from '../../../../../types/http'
+
+export interface HttpRequestFrontmatter {
+  id?: number
+  name?: string
+  folderId?: number | null
+  method?: HttpMethod
+  url?: string
+  headers?: HttpHeaderEntry[]
+  query?: HttpQueryEntry[]
+  bodyType?: HttpBodyType
+  body?: string | null
+  formData?: HttpFormDataEntry[]
+  auth?: HttpAuth
+  createdAt?: number
+  updatedAt?: number
+}
+
+export interface HttpFolderRecord {
+  id: number
+  name: string
+  icon: string | null
+  parentId: number | null
+  isOpen: number
+  orderIndex: number
+  createdAt: number
+  updatedAt: number
+}
+
+export interface HttpFolderTreeRecord extends HttpFolderRecord {
+  children: HttpFolderTreeRecord[]
+}
+
+export interface HttpRequestIndexItem {
+  id: number
+  filePath: string
+}
+
+export interface HttpRequestRecord {
+  id: number
+  name: string
+  folderId: number | null
+  method: HttpMethod
+  url: string
+  headers: HttpHeaderEntry[]
+  query: HttpQueryEntry[]
+  bodyType: HttpBodyType
+  body: string | null
+  formData: HttpFormDataEntry[]
+  auth: HttpAuth
+  description: string
+  filePath: string
+  createdAt: number
+  updatedAt: number
+}
+
+export interface HttpEnvironmentRecord {
+  id: number
+  name: string
+  variables: Record<string, string>
+  createdAt: number
+  updatedAt: number
+}
+
+export interface HttpHistoryRecord {
+  id: number
+  requestId: number | null
+  method: HttpMethod
+  url: string
+  status: number | null
+  durationMs: number
+  sizeBytes: number
+  requestedAt: number
+  error?: string
+}
+
+export interface HttpCounters {
+  folderId: number
+  requestId: number
+  environmentId: number
+  historyId: number
+}
+
+export interface HttpStateFile {
+  version?: number
+  counters?: Partial<HttpCounters>
+  folders?: HttpFolderRecord[]
+  requests?: HttpRequestIndexItem[]
+  environments?: HttpEnvironmentRecord[]
+  activeEnvironmentId?: number | null
+  history?: HttpHistoryRecord[]
+}
+
+export interface HttpState {
+  version: number
+  counters: HttpCounters
+  folders: HttpFolderRecord[]
+  requests: HttpRequestIndexItem[]
+  environments: HttpEnvironmentRecord[]
+  activeEnvironmentId: number | null
+  history: HttpHistoryRecord[]
+}
+
+export interface HttpPaths {
+  httpRoot: string
+  statePath: string
+}
+
+export interface HttpRuntimeCache {
+  paths: HttpPaths
+  state: HttpState
+  requestById: Map<number, HttpRequestRecord>
+  folderById: Map<number, HttpFolderRecord>
+}
diff --git a/src/main/storage/providers/markdown/http/storages/environments.ts b/src/main/storage/providers/markdown/http/storages/environments.ts
new file mode 100644
index 00000000..2fe7de1e
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/storages/environments.ts
@@ -0,0 +1,157 @@
+import type {
+  HttpEnvironmentCreateInput,
+  HttpEnvironmentsStorage,
+  HttpEnvironmentUpdateInput,
+  HttpEnvironmentUpdateResult,
+} from '../../../../contracts'
+import type { HttpEnvironmentRecord } from '../runtime/types'
+import { getVaultPath } from '../../runtime/paths'
+import { throwStorageError, validateEntryName } from '../../runtime/validation'
+import { getHttpPaths } from '../runtime/paths'
+import { saveHttpState } from '../runtime/state'
+import { getHttpRuntimeCache } from '../runtime/sync'
+
+function normalizeVariables(
+  raw: Record<string, string> | undefined,
+): Record<string, string> {
+  if (!raw || typeof raw !== 'object') {
+    return {}
+  }
+
+  const result: Record<string, string> = {}
+  for (const [key, value] of Object.entries(raw)) {
+    if (typeof key !== 'string' || !key.trim()) {
+      continue
+    }
+    result[key] = typeof value === 'string' ? value : ''
+  }
+  return result
+}
+
+export function createHttpEnvironmentsStorage(): HttpEnvironmentsStorage {
+  function resolvePaths() {
+    return getHttpPaths(getVaultPath())
+  }
+
+  function getCache() {
+    return getHttpRuntimeCache(resolvePaths())
+  }
+
+  return {
+    getEnvironments() {
+      const { state } = getCache()
+      return [...state.environments].sort((a, b) => a.createdAt - b.createdAt)
+    },
+
+    getActiveEnvironmentId() {
+      const { state } = getCache()
+      return state.activeEnvironmentId
+    },
+
+    setActiveEnvironment(id: number | null) {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+
+      if (id !== null) {
+        const exists = state.environments.some(env => env.id === id)
+        if (!exists) {
+          return { notFound: true }
+        }
+      }
+
+      state.activeEnvironmentId = id
+      saveHttpState(paths, state)
+      return { notFound: false }
+    },
+
+    createEnvironment(input: HttpEnvironmentCreateInput) {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+
+      const name = validateEntryName(input.name, 'folder')
+      const conflict = state.environments.some(
+        env => env.name.toLowerCase() === name.toLowerCase(),
+      )
+      if (conflict) {
+        throwStorageError(
+          'NAME_CONFLICT',
+          'Environment with this name already exists',
+        )
+      }
+
+      state.counters.environmentId += 1
+      const id = state.counters.environmentId
+      const now = Date.now()
+      const record: HttpEnvironmentRecord = {
+        createdAt: now,
+        id,
+        name,
+        updatedAt: now,
+        variables: normalizeVariables(input.variables),
+      }
+      state.environments.push(record)
+
+      saveHttpState(paths, state)
+      return { id }
+    },
+
+    updateEnvironment(
+      id: number,
+      input: HttpEnvironmentUpdateInput,
+    ): HttpEnvironmentUpdateResult {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+      const env = state.environments.find(item => item.id === id)
+
+      if (!env) {
+        return { invalidInput: false, notFound: true }
+      }
+
+      if (input.name === undefined && input.variables === undefined) {
+        return { invalidInput: true, notFound: false }
+      }
+
+      if (input.name !== undefined) {
+        const nextName = validateEntryName(input.name, 'folder')
+        const conflict = state.environments.some(
+          item =>
+            item.id !== id
+            && item.name.toLowerCase() === nextName.toLowerCase(),
+        )
+        if (conflict) {
+          throwStorageError(
+            'NAME_CONFLICT',
+            'Environment with this name already exists',
+          )
+        }
+        env.name = nextName
+      }
+
+      if (input.variables !== undefined) {
+        env.variables = normalizeVariables(input.variables)
+      }
+
+      env.updatedAt = Date.now()
+      saveHttpState(paths, state)
+      return { invalidInput: false, notFound: false }
+    },
+
+    deleteEnvironment(id: number) {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+      const index = state.environments.findIndex(item => item.id === id)
+
+      if (index === -1) {
+        return { deleted: false }
+      }
+
+      state.environments.splice(index, 1)
+      if (state.activeEnvironmentId === id) {
+        state.activeEnvironmentId = null
+      }
+
+      saveHttpState(paths, state)
+      return { deleted: true }
+    },
+  }
+}
diff --git a/src/main/storage/providers/markdown/http/storages/folders.ts b/src/main/storage/providers/markdown/http/storages/folders.ts
new file mode 100644
index 00000000..84398024
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/storages/folders.ts
@@ -0,0 +1,302 @@
+import type {
+  HttpFolderCreateInput,
+  HttpFoldersStorage,
+  HttpFolderUpdateInput,
+  HttpFolderUpdateResult,
+} from '../../../../contracts'
+import type {
+  HttpFolderRecord,
+  HttpRequestIndexItem,
+  HttpRequestRecord,
+} from '../runtime/types'
+import path from 'node:path'
+import { normalizeFlag, normalizeNumber } from '../../runtime/normalizers'
+import { getVaultPath } from '../../runtime/paths'
+import {
+  buildFolderPathMap,
+  collectDescendantIds,
+  getNextFolderOrder,
+} from '../../runtime/shared/folderIndex'
+import {
+  applyFolderParentAndOrder,
+  assertFolderMoveTargetValid,
+  createFolderInStateAndDisk,
+  getFolderPathsByDepth,
+  getFoldersSortedByCreatedAt,
+  getFoldersTreeSorted,
+  moveFolderDirectoryOnDisk,
+  removeFolderPathsFromDisk,
+  replaceSubtreePathPrefix,
+  resolveFolderUpdateTargets,
+  updateChildEntityPaths,
+} from '../../runtime/shared/foldersStorage'
+import {
+  assertDirectoryNameAvailableAtRoot,
+  assertUniqueSiblingFolderName,
+  resolveUniqueSiblingFolderName,
+  throwStorageError,
+  validateEntryName,
+} from '../../runtime/validation'
+import { getHttpPaths } from '../runtime/paths'
+import { saveHttpState } from '../runtime/state'
+import { getHttpRuntimeCache } from '../runtime/sync'
+
+function findHttpFolderById(
+  folders: HttpFolderRecord[],
+  folderId: number,
+): HttpFolderRecord | undefined {
+  return folders.find(folder => folder.id === folderId)
+}
+
+function syncRequestFolderId(
+  records: HttpRequestRecord[],
+  indexEntries: HttpRequestIndexItem[],
+  pathToFolderId: Map<string, number>,
+): void {
+  for (const record of records) {
+    const indexEntry = indexEntries.find(entry => entry.id === record.id)
+    const filePath = indexEntry?.filePath ?? record.filePath
+    const dirPath = path.posix.dirname(filePath)
+    const nextFolderId
+      = dirPath && dirPath !== '.' ? (pathToFolderId.get(dirPath) ?? null) : null
+    record.folderId = nextFolderId
+  }
+}
+
+export function createHttpFoldersStorage(): HttpFoldersStorage {
+  function resolvePaths() {
+    return getHttpPaths(getVaultPath())
+  }
+
+  function getCache() {
+    return getHttpRuntimeCache(resolvePaths())
+  }
+
+  return {
+    getFolders() {
+      const { state } = getCache()
+      return getFoldersSortedByCreatedAt(state.folders)
+    },
+
+    getFoldersTree() {
+      const { state } = getCache()
+      return getFoldersTreeSorted(state.folders)
+    },
+
+    createFolder(input: HttpFolderCreateInput) {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+
+      const name = validateEntryName(input.name, 'folder')
+      const parentId = input.parentId ?? null
+
+      assertUniqueSiblingFolderName(state, parentId, name)
+
+      if (parentId !== null) {
+        const parent = findHttpFolderById(state.folders, parentId)
+        if (!parent) {
+          throwStorageError('FOLDER_NOT_FOUND', 'Parent folder not found')
+        }
+      }
+
+      const { id: folderId } = createFolderInStateAndDisk({
+        buildFolderPathMap: state => buildFolderPathMap(state.folders),
+        createFolder: ({ id, name, now, orderIndex, parentId }) => ({
+          createdAt: now,
+          id,
+          icon: input.icon ?? null,
+          isOpen: 0,
+          name,
+          orderIndex,
+          parentId,
+          updatedAt: now,
+        }),
+        getNextFolderOrder: (state, parentId) =>
+          getNextFolderOrder(state.folders, parentId),
+        name,
+        parentId,
+        rootPath: paths.httpRoot,
+        state,
+      })
+      saveHttpState(paths, state)
+
+      return { id: folderId }
+    },
+
+    updateFolder(
+      id: number,
+      input: HttpFolderUpdateInput,
+    ): HttpFolderUpdateResult {
+      const paths = resolvePaths()
+      const cache = getHttpRuntimeCache(paths)
+      const { state } = cache
+      const folder = findHttpFolderById(state.folders, id)
+
+      if (!folder) {
+        return { invalidInput: false, notFound: true }
+      }
+
+      if (
+        input.name === undefined
+        && input.icon === undefined
+        && input.parentId === undefined
+        && input.isOpen === undefined
+        && input.orderIndex === undefined
+      ) {
+        return { invalidInput: true, notFound: false }
+      }
+
+      const now = Date.now()
+      let pathChanged = false
+
+      const oldFolderPathMap = buildFolderPathMap(state.folders)
+      const oldPath = oldFolderPathMap.get(id)
+
+      let targetName
+        = input.name !== undefined
+          ? validateEntryName(input.name, 'folder')
+          : folder.name
+
+      const { targetOrderIndex, targetParentId } = resolveFolderUpdateTargets(
+        folder,
+        input,
+        normalizeNumber,
+      )
+
+      if (input.parentId !== undefined) {
+        assertFolderMoveTargetValid(state.folders, id, targetParentId)
+      }
+
+      const isParentChanged = targetParentId !== folder.parentId
+      if (isParentChanged) {
+        targetName = resolveUniqueSiblingFolderName(
+          state,
+          targetParentId,
+          targetName,
+          id,
+        )
+      }
+      else if (targetName !== folder.name) {
+        assertUniqueSiblingFolderName(state, targetParentId, targetName, id)
+      }
+
+      if (targetName !== folder.name) {
+        folder.name = targetName
+        pathChanged = true
+      }
+
+      const { parentChanged } = applyFolderParentAndOrder(
+        state.folders,
+        folder,
+        targetParentId,
+        targetOrderIndex,
+      )
+
+      if (parentChanged) {
+        pathChanged = true
+      }
+
+      if (input.isOpen !== undefined) {
+        folder.isOpen = normalizeFlag(input.isOpen)
+      }
+
+      if (input.icon !== undefined) {
+        folder.icon = input.icon
+      }
+
+      folder.updatedAt = now
+
+      if (pathChanged) {
+        const newFolderPathMap = buildFolderPathMap(state.folders)
+        const newPath = newFolderPathMap.get(id)
+
+        if (oldPath && newPath && oldPath !== newPath) {
+          const targetParentPath = path.posix.dirname(newPath)
+          assertDirectoryNameAvailableAtRoot(
+            paths.httpRoot,
+            targetParentPath === '.' ? '' : targetParentPath,
+            path.posix.basename(newPath),
+            oldPath,
+          )
+
+          moveFolderDirectoryOnDisk(paths.httpRoot, oldPath, newPath)
+
+          updateChildEntityPaths({
+            entries: [...cache.requestById.values()],
+            getNextPath: (_, previousPath) =>
+              replaceSubtreePathPrefix(previousPath, oldPath, newPath),
+            onPathUpdated: (record, _previousPath, nextPath) => {
+              const indexEntry = state.requests.find(r => r.id === record.id)
+              if (indexEntry) {
+                indexEntry.filePath = nextPath
+              }
+            },
+          })
+
+          const pathToFolderId = new Map<string, number>()
+          newFolderPathMap.forEach((folderPath, folderId) => {
+            pathToFolderId.set(folderPath, folderId)
+          })
+          syncRequestFolderId(
+            [...cache.requestById.values()],
+            state.requests,
+            pathToFolderId,
+          )
+        }
+      }
+
+      saveHttpState(paths, state)
+      return { invalidInput: false, notFound: false }
+    },
+
+    deleteFolder(id: number) {
+      const paths = resolvePaths()
+      const cache = getHttpRuntimeCache(paths)
+      const { state } = cache
+      const folder = findHttpFolderById(state.folders, id)
+
+      if (!folder) {
+        return { deleted: false }
+      }
+
+      const descendantIds = collectDescendantIds(state.folders, id)
+      descendantIds.add(id)
+
+      const folderPathMap = buildFolderPathMap(state.folders)
+      const folderPathsToDelete = getFolderPathsByDepth(
+        folderPathMap,
+        descendantIds,
+      )
+
+      removeFolderPathsFromDisk(paths.httpRoot, folderPathsToDelete, {
+        ignoreErrors: true,
+      })
+
+      const removedRequestIds = new Set<number>()
+      for (const record of cache.requestById.values()) {
+        if (record.folderId !== null && descendantIds.has(record.folderId)) {
+          removedRequestIds.add(record.id)
+        }
+      }
+
+      if (removedRequestIds.size > 0) {
+        for (const removedId of removedRequestIds) {
+          cache.requestById.delete(removedId)
+        }
+        state.requests = state.requests.filter(
+          entry => !removedRequestIds.has(entry.id),
+        )
+      }
+
+      state.folders = state.folders.filter(f => !descendantIds.has(f.id))
+
+      cache.folderById = new Map(
+        state.folders.map(folder => [folder.id, folder]),
+      )
+
+      saveHttpState(paths, state)
+
+      return { deleted: true }
+    },
+  }
+}
diff --git a/src/main/storage/providers/markdown/http/storages/history.ts b/src/main/storage/providers/markdown/http/storages/history.ts
new file mode 100644
index 00000000..6d7448b6
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/storages/history.ts
@@ -0,0 +1,64 @@
+import type {
+  HttpHistoryAppendInput,
+  HttpHistoryStorage,
+} from '../../../../contracts'
+import type { HttpHistoryRecord } from '../runtime/types'
+import { getVaultPath } from '../../runtime/paths'
+import { HTTP_HISTORY_CAP } from '../runtime/constants'
+import { getHttpPaths } from '../runtime/paths'
+import { saveHttpState } from '../runtime/state'
+import { getHttpRuntimeCache } from '../runtime/sync'
+
+export function createHttpHistoryStorage(): HttpHistoryStorage {
+  function resolvePaths() {
+    return getHttpPaths(getVaultPath())
+  }
+
+  function getCache() {
+    return getHttpRuntimeCache(resolvePaths())
+  }
+
+  return {
+    getEntries() {
+      const { state } = getCache()
+      return [...state.history].sort((a, b) => b.requestedAt - a.requestedAt)
+    },
+
+    appendEntry(input: HttpHistoryAppendInput) {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+
+      state.counters.historyId += 1
+      const id = state.counters.historyId
+      const record: HttpHistoryRecord = {
+        durationMs: input.durationMs,
+        id,
+        method: input.method,
+        requestedAt: input.requestedAt,
+        requestId: input.requestId,
+        sizeBytes: input.sizeBytes,
+        status: input.status,
+        url: input.url,
+      }
+
+      if (input.error) {
+        record.error = input.error
+      }
+
+      state.history.push(record)
+      if (state.history.length > HTTP_HISTORY_CAP) {
+        state.history = state.history.slice(-HTTP_HISTORY_CAP)
+      }
+
+      saveHttpState(paths, state)
+      return { id }
+    },
+
+    clear() {
+      const paths = resolvePaths()
+      const { state } = getHttpRuntimeCache(paths)
+      state.history = []
+      saveHttpState(paths, state)
+    },
+  }
+}
diff --git a/src/main/storage/providers/markdown/http/storages/index.ts b/src/main/storage/providers/markdown/http/storages/index.ts
new file mode 100644
index 00000000..8eb97339
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/storages/index.ts
@@ -0,0 +1,14 @@
+import type { HttpStorageProvider } from '../../../../contracts'
+import { createHttpEnvironmentsStorage } from './environments'
+import { createHttpFoldersStorage } from './folders'
+import { createHttpHistoryStorage } from './history'
+import { createHttpRequestsStorage } from './requests'
+
+export function createHttpStorageProvider(): HttpStorageProvider {
+  return {
+    environments: createHttpEnvironmentsStorage(),
+    folders: createHttpFoldersStorage(),
+    history: createHttpHistoryStorage(),
+    requests: createHttpRequestsStorage(),
+  }
+}
diff --git a/src/main/storage/providers/markdown/http/storages/requests.ts b/src/main/storage/providers/markdown/http/storages/requests.ts
new file mode 100644
index 00000000..7ca8ff50
--- /dev/null
+++ b/src/main/storage/providers/markdown/http/storages/requests.ts
@@ -0,0 +1,349 @@
+import type {
+  HttpRequestCreateInput,
+  HttpRequestsQueryInput,
+  HttpRequestsStorage,
+  HttpRequestUpdateInput,
+  HttpRequestUpdateResult,
+} from '../../../../contracts'
+import type {
+  HttpFolderRecord,
+  HttpRequestRecord,
+  HttpState,
+} from '../runtime/types'
+import path from 'node:path'
+import fs from 'fs-extra'
+import { getVaultPath } from '../../runtime/paths'
+import { buildFolderPathMap } from '../../runtime/shared/folderIndex'
+import {
+  assertUniqueSiblingEntryName,
+  throwStorageError,
+  validateEntryName,
+} from '../../runtime/validation'
+import { writeRequestFile } from '../runtime/parser'
+import { getHttpPaths } from '../runtime/paths'
+import { saveHttpState } from '../runtime/state'
+import { getHttpRuntimeCache } from '../runtime/sync'
+
+function findFolderById(
+  folders: HttpFolderRecord[],
+  folderId: number,
+): HttpFolderRecord | undefined {
+  return folders.find(folder => folder.id === folderId)
+}
+
+function resolveFolderRelativePath(
+  state: HttpState,
+  folderId: number | null,
+): string {
+  if (folderId === null) {
+    return ''
+  }
+
+  const folderPathMap = buildFolderPathMap(state.folders)
+  return folderPathMap.get(folderId) ?? ''
+}
+
+function buildRequestFilePath(
+  state: HttpState,
+  folderId: number | null,
+  name: string,
+): string {
+  const folderPath = resolveFolderRelativePath(state, folderId)
+  const fileName = `${name}.md`
+  return folderPath ? path.posix.join(folderPath, fileName) : fileName
+}
+
+function removeRequestFile(httpRoot: string, filePath: string): void {
+  const absolutePath = path.join(httpRoot, filePath)
+  if (fs.pathExistsSync(absolutePath)) {
+    fs.removeSync(absolutePath)
+  }
+}
+
+function moveRequestFile(
+  httpRoot: string,
+  oldFilePath: string,
+  newFilePath: string,
+): void {
+  if (oldFilePath === newFilePath) {
+    return
+  }
+
+  const oldAbsolutePath = path.join(httpRoot, oldFilePath)
+  if (!fs.pathExistsSync(oldAbsolutePath)) {
+    return
+  }
+
+  const newAbsolutePath = path.join(httpRoot, newFilePath)
+  fs.ensureDirSync(path.dirname(newAbsolutePath))
+  fs.moveSync(oldAbsolutePath, newAbsolutePath, { overwrite: false })
+}
+
+function getUniqueRequestFilePath(
+  httpRoot: string,
+  targetPath: string,
+  currentFilePath: string | null,
+): string {
+  const targetAbsolutePath = path.join(httpRoot, targetPath)
+
+  if (!fs.pathExistsSync(targetAbsolutePath)) {
+    return targetPath
+  }
+
+  if (currentFilePath) {
+    const currentAbsolutePath = path.join(httpRoot, currentFilePath)
+    if (
+      targetAbsolutePath.toLowerCase() === currentAbsolutePath.toLowerCase()
+    ) {
+      return targetPath
+    }
+  }
+
+  const dir = path.posix.dirname(targetPath)
+  const ext = path.posix.extname(targetPath)
+  const baseName = path.posix.basename(targetPath, ext)
+
+  for (let suffix = 1; suffix <= 10_000; suffix += 1) {
+    const candidatePath = path.posix.join(dir, `${baseName} ${suffix}${ext}`)
+    const candidateAbsolutePath = path.join(httpRoot, candidatePath)
+
+    if (!fs.pathExistsSync(candidateAbsolutePath)) {
+      return candidatePath
+    }
+  }
+
+  throwStorageError(
+    'NAME_CONFLICT',
+    'Cannot generate unique request file name',
+  )
+}
+
+export function createHttpRequestsStorage(): HttpRequestsStorage {
+  function resolvePaths() {
+    return getHttpPaths(getVaultPath())
+  }
+
+  function getCache() {
+    return getHttpRuntimeCache(resolvePaths())
+  }
+
+  return {
+    getRequests(query?: HttpRequestsQueryInput) {
+      const { requestById } = getCache()
+      const all = [...requestById.values()].sort(
+        (a, b) => b.createdAt - a.createdAt,
+      )
+
+      const search = query?.search?.trim().toLowerCase()
+      if (!search) {
+        return all
+      }
+
+      return all.filter(
+        request =>
+          request.name.toLowerCase().includes(search)
+          || request.url.toLowerCase().includes(search),
+      )
+    },
+
+    getRequestById(id: number) {
+      const { requestById } = getCache()
+      return requestById.get(id) ?? null
+    },
+
+    createRequest(input: HttpRequestCreateInput) {
+      const paths = resolvePaths()
+      const cache = getHttpRuntimeCache(paths)
+      const { state } = cache
+
+      const name = validateEntryName(input.name, 'request')
+      const folderId = input.folderId ?? null
+
+      if (folderId !== null && !findFolderById(state.folders, folderId)) {
+        throwStorageError('FOLDER_NOT_FOUND', 'Folder not found')
+      }
+
+      const existingEntries = [...cache.requestById.values()].map(record => ({
+        folderId: record.folderId,
+        id: record.id,
+        name: record.name,
+      }))
+      assertUniqueSiblingEntryName(existingEntries, folderId, name, 'request')
+
+      state.counters.requestId += 1
+      const id = state.counters.requestId
+      const now = Date.now()
+      const filePath = buildRequestFilePath(state, folderId, name)
+
+      const record: HttpRequestRecord = {
+        auth: { type: 'none' },
+        body: null,
+        bodyType: 'none',
+        createdAt: now,
+        description: '',
+        filePath,
+        folderId,
+        formData: [],
+        headers: [],
+        id,
+        method: input.method ?? 'GET',
+        name,
+        query: [],
+        updatedAt: now,
+        url: input.url ?? '',
+      }
+
+      writeRequestFile(paths.httpRoot, record)
+      state.requests.push({ filePath, id })
+      cache.requestById.set(id, record)
+
+      saveHttpState(paths, state)
+
+      return { id }
+    },
+
+    updateRequest(
+      id: number,
+      input: HttpRequestUpdateInput,
+    ): HttpRequestUpdateResult {
+      const paths = resolvePaths()
+      const cache = getHttpRuntimeCache(paths)
+      const { state } = cache
+      const record = cache.requestById.get(id)
+
+      if (!record) {
+        return { invalidInput: false, notFound: true }
+      }
+
+      const updatableFields = [
+        input.name,
+        input.folderId,
+        input.method,
+        input.url,
+        input.headers,
+        input.query,
+        input.bodyType,
+        input.body,
+        input.formData,
+        input.auth,
+        input.description,
+      ]
+
+      if (updatableFields.every(value => value === undefined)) {
+        return { invalidInput: true, notFound: false }
+      }
+
+      const previousFilePath = record.filePath
+      const previousName = record.name
+      const previousFolderId = record.folderId
+
+      const nextFolderId
+        = input.folderId !== undefined
+          ? (input.folderId ?? null)
+          : record.folderId
+      if (
+        nextFolderId !== null
+        && nextFolderId !== record.folderId
+        && !findFolderById(state.folders, nextFolderId)
+      ) {
+        throwStorageError('FOLDER_NOT_FOUND', 'Folder not found')
+      }
+
+      const nextName
+        = input.name !== undefined
+          ? validateEntryName(input.name, 'request')
+          : record.name
+
+      const isFolderChanging = nextFolderId !== record.folderId
+      const isNameChanging
+        = nextName.toLowerCase() !== record.name.toLowerCase()
+
+      if (!isFolderChanging && isNameChanging) {
+        const siblingEntries = [...cache.requestById.values()]
+          .filter(r => r.id !== id)
+          .map(r => ({ folderId: r.folderId, id: r.id, name: r.name }))
+        assertUniqueSiblingEntryName(
+          siblingEntries,
+          nextFolderId,
+          nextName,
+          'request',
+        )
+      }
+
+      record.name = nextName
+      record.folderId = nextFolderId
+      if (input.method !== undefined)
+        record.method = input.method
+      if (input.url !== undefined)
+        record.url = input.url
+      if (input.headers !== undefined)
+        record.headers = input.headers
+      if (input.query !== undefined)
+        record.query = input.query
+      if (input.bodyType !== undefined)
+        record.bodyType = input.bodyType
+      if (input.body !== undefined)
+        record.body = input.body
+      if (input.formData !== undefined)
+        record.formData = input.formData
+      if (input.auth !== undefined)
+        record.auth = input.auth
+      if (input.description !== undefined)
+        record.description = input.description
+
+      record.updatedAt = Date.now()
+
+      if (
+        previousName !== record.name
+        || previousFolderId !== record.folderId
+      ) {
+        const targetPath = buildRequestFilePath(
+          state,
+          record.folderId,
+          record.name,
+        )
+        const resolvedPath = getUniqueRequestFilePath(
+          paths.httpRoot,
+          targetPath,
+          previousFilePath,
+        )
+        if (resolvedPath !== targetPath) {
+          record.name = path.posix.basename(resolvedPath, '.md')
+        }
+
+        if (resolvedPath !== previousFilePath) {
+          moveRequestFile(paths.httpRoot, previousFilePath, resolvedPath)
+          record.filePath = resolvedPath
+
+          const indexEntry = state.requests.find(entry => entry.id === id)
+          if (indexEntry) {
+            indexEntry.filePath = resolvedPath
+          }
+        }
+      }
+
+      writeRequestFile(paths.httpRoot, record)
+      saveHttpState(paths, state)
+
+      return { invalidInput: false, notFound: false }
+    },
+
+    deleteRequest(id: number) {
+      const paths = resolvePaths()
+      const cache = getHttpRuntimeCache(paths)
+      const { state } = cache
+      const record = cache.requestById.get(id)
+
+      if (!record) {
+        return { deleted: false }
+      }
+
+      removeRequestFile(paths.httpRoot, record.filePath)
+      cache.requestById.delete(id)
+      state.requests = state.requests.filter(entry => entry.id !== id)
+
+      saveHttpState(paths, state)
+      return { deleted: true }
+    },
+  }
+}
diff --git a/src/main/storage/providers/markdown/runtime/constants.ts b/src/main/storage/providers/markdown/runtime/constants.ts
index 2c32a354..dcdefd61 100644
--- a/src/main/storage/providers/markdown/runtime/constants.ts
+++ b/src/main/storage/providers/markdown/runtime/constants.ts
@@ -5,6 +5,7 @@ export const TRASH_DIR_NAME = 'trash'
 export const CODE_SPACE_ID = 'code'
 export const MATH_SPACE_ID = 'math'
 export const NOTES_SPACE_ID = 'notes'
+export const HTTP_SPACE_ID = 'http'
 export const META_FILE_NAME = '.meta.yaml'
 export const SPACE_STATE_FILE_NAME = '.state.yaml'
 export const LEGACY_FOLDER_META_FILE_NAME = '.masscode-folder.yml'
@@ -12,6 +13,7 @@ export const PERSISTED_SPACE_IDS = [
   CODE_SPACE_ID,
   MATH_SPACE_ID,
   NOTES_SPACE_ID,
+  HTTP_SPACE_ID,
 ] as const
 export const SPACE_IDS = new Set<string>(PERSISTED_SPACE_IDS)
 
@@ -26,6 +28,7 @@ export const RESERVED_ROOT_NAMES = new Set([
   CODE_SPACE_ID,
   MATH_SPACE_ID,
   NOTES_SPACE_ID,
+  HTTP_SPACE_ID,
 ])
 export const NEW_LINE_SPLIT_RE = /\r?\n/
 export const SEARCH_DIACRITICS_RE = /[\u0300-\u036F]/g
diff --git a/src/main/storage/providers/markdown/runtime/validation.ts b/src/main/storage/providers/markdown/runtime/validation.ts
index dd38f902..3fbfe693 100644
--- a/src/main/storage/providers/markdown/runtime/validation.ts
+++ b/src/main/storage/providers/markdown/runtime/validation.ts
@@ -41,7 +41,7 @@ function hasInvalidNameChars(name: string): boolean {
 
 export function validateEntryName(
   name: string,
-  kind: 'folder' | 'note' | 'snippet',
+  kind: 'folder' | 'note' | 'snippet' | 'request',
 ): string {
   const normalized = normalizeName(name)
 
@@ -106,12 +106,12 @@ export function assertUniqueSiblingEntryName(
   entries: {
     id: number
     name: string
-    isDeleted: number
+    isDeleted?: number
     folderId: number | null
   }[],
   folderId: number | null,
   name: string,
-  kind: 'note' | 'snippet',
+  kind: 'note' | 'snippet' | 'request',
   excludeId?: number,
 ): void {
   const normalizedName = name.toLowerCase()
@@ -119,15 +119,17 @@ export function assertUniqueSiblingEntryName(
   const hasConflict = entries.some(
     entry =>
       entry.id !== excludeId
-      && entry.isDeleted === 0
+      && (entry.isDeleted ?? 0) === 0
       && entry.folderId === folderId
       && entry.name.toLowerCase() === normalizedName,
   )
 
   if (hasConflict) {
+    const label
+      = kind === 'note' ? 'Note' : kind === 'snippet' ? 'Snippet' : 'Request'
     throwStorageError(
       'NAME_CONFLICT',
-      `${kind === 'note' ? 'Note' : 'Snippet'} with this name already exists in this folder`,
+      `${label} with this name already exists in this folder`,
     )
   }
 }
diff --git a/src/main/storage/providers/markdown/watcher.ts b/src/main/storage/providers/markdown/watcher.ts
index 96f6dd15..74bc148f 100644
--- a/src/main/storage/providers/markdown/watcher.ts
+++ b/src/main/storage/providers/markdown/watcher.ts
@@ -1,6 +1,12 @@
 import type { ChokidarOptions, FSWatcher } from 'chokidar'
 import { BrowserWindow } from 'electron'
 import { importEsm, log } from '../../../utils'
+import {
+  getHttpPaths,
+  peekHttpRuntimeCache,
+  resetHttpRuntimeCache,
+  syncHttpRuntimeWithDisk,
+} from './http'
 import {
   getNotesPaths,
   peekNotesRuntimeCache,
@@ -20,6 +26,7 @@ import {
 import {
   getWatchPathSpaceId,
   isCodeWatchPath,
+  isHttpWatchPath,
   isMathWatchPath,
   isNotesWatchPath,
   normalizeRelativeWatchPath,
@@ -34,6 +41,7 @@ let pendingFilePath: string | null = null
 let hasPendingFullSync = false
 let hasPendingMathSync = false
 let hasPendingNotesSync = false
+let hasPendingHttpSync = false
 let watcherStartToken = 0
 let chokidarWatchLoader: Promise<ChokidarWatch> | null = null
 
@@ -85,6 +93,7 @@ function scheduleStateSync(
   const changedNotesPath = isNotesWatchPath(changedPath)
   const changedCodePath = isCodeWatchPath(changedPath)
   const changedMathPath = isMathWatchPath(changedPath)
+  const changedHttpPath = isHttpWatchPath(changedPath)
   const changedCodeRelativePath
     = changedPath && changedCodePath ? toCodeRelativePath(changedPath) : null
 
@@ -96,17 +105,25 @@ function scheduleStateSync(
     hasPendingMathSync = true
   }
 
+  if (changedHttpPath) {
+    hasPendingHttpSync = true
+  }
+
   if (changedNotesPath) {
     // Notes space has separate runtime cache sync path.
   }
   else if (changedMathPath) {
     // Math space has no main-process cache to sync; broadcast only.
   }
+  else if (changedHttpPath) {
+    // HTTP space has separate runtime cache sync path.
+  }
   else if (forceFullSync || !changedPath) {
     hasPendingFullSync = true
 
     if (forceFullSync && !changedPath) {
       hasPendingNotesSync = true
+      hasPendingHttpSync = true
     }
   }
   else if (changedCodeRelativePath) {
@@ -131,14 +148,17 @@ function scheduleStateSync(
     try {
       const previousCache = peekRuntimeCache()
       const previousNotesCache = peekNotesRuntimeCache()
+      const previousHttpCache = peekHttpRuntimeCache()
       const changedFilePath = hasPendingFullSync ? null : pendingFilePath
       const shouldNotifyMath = hasPendingMathSync
       const shouldSyncCode = hasPendingFullSync || changedFilePath !== null
       const shouldSyncNotes = hasPendingNotesSync
+      const shouldSyncHttp = hasPendingHttpSync
 
       hasPendingFullSync = false
       hasPendingMathSync = false
       hasPendingNotesSync = false
+      hasPendingHttpSync = false
       pendingFilePath = null
 
       let nextCache = previousCache
@@ -157,6 +177,9 @@ function scheduleStateSync(
       const nextNotesCache = shouldSyncNotes
         ? syncNotesRuntimeWithDisk(getNotesPaths(vaultRootPath))
         : previousNotesCache
+      const nextHttpCache = shouldSyncHttp
+        ? syncHttpRuntimeWithDisk(getHttpPaths(vaultRootPath))
+        : previousHttpCache
 
       const hasCodeChanges
         = shouldSyncCode && (!previousCache || nextCache !== previousCache)
@@ -164,8 +187,16 @@ function scheduleStateSync(
         = shouldSyncNotes
           && (!previousNotesCache || nextNotesCache !== previousNotesCache)
       const hasMathChanges = shouldNotifyMath
-
-      if (hasCodeChanges || hasNotesChanges || hasMathChanges) {
+      const hasHttpChanges
+        = shouldSyncHttp
+          && (!previousHttpCache || nextHttpCache !== previousHttpCache)
+
+      if (
+        hasCodeChanges
+        || hasNotesChanges
+        || hasMathChanges
+        || hasHttpChanges
+      ) {
         BrowserWindow.getAllWindows().forEach((window) => {
           window.webContents.send('system:storage-synced')
         })
@@ -195,8 +226,10 @@ export function stopMarkdownWatcher(): void {
   hasPendingFullSync = false
   hasPendingMathSync = false
   hasPendingNotesSync = false
+  hasPendingHttpSync = false
   resetRuntimeCache()
   resetNotesRuntimeCache()
+  resetHttpRuntimeCache()
 }
 
 export function startMarkdownWatcher(): void {
@@ -205,6 +238,8 @@ export function startMarkdownWatcher(): void {
   const runtimeCache = peekRuntimeCache()
   const notesPaths = getNotesPaths(vaultRootPath)
   const notesRuntimeCache = peekNotesRuntimeCache()
+  const httpPaths = getHttpPaths(vaultRootPath)
+  const httpRuntimeCache = peekHttpRuntimeCache()
 
   if (markdownWatcher && watchedVaultPath === vaultRootPath) {
     if (!runtimeCache || runtimeCache.paths.vaultPath !== paths.vaultPath) {
@@ -219,6 +254,13 @@ export function startMarkdownWatcher(): void {
       syncNotesRuntimeWithDisk(notesPaths)
     }
 
+    if (
+      !httpRuntimeCache
+      || httpRuntimeCache.paths.httpRoot !== httpPaths.httpRoot
+    ) {
+      syncHttpRuntimeWithDisk(httpPaths)
+    }
+
     return
   }
 
@@ -226,6 +268,7 @@ export function startMarkdownWatcher(): void {
   ensureStateFile(paths)
   syncRuntimeWithDisk(paths)
   syncNotesRuntimeWithDisk(notesPaths)
+  syncHttpRuntimeWithDisk(httpPaths)
 
   const startToken = ++watcherStartToken
 
diff --git a/src/main/storage/providers/markdown/watcherPaths.ts b/src/main/storage/providers/markdown/watcherPaths.ts
index 2eb04a86..d16bc791 100644
--- a/src/main/storage/providers/markdown/watcherPaths.ts
+++ b/src/main/storage/providers/markdown/watcherPaths.ts
@@ -1,6 +1,7 @@
 import path from 'node:path'
 import {
   CODE_SPACE_ID,
+  HTTP_SPACE_ID,
   INBOX_DIR_NAME,
   MATH_SPACE_ID,
   META_DIR_NAME,
@@ -99,6 +100,10 @@ export function isMathWatchPath(relativePath: string | null): boolean {
   return getWatchPathSpaceId(relativePath) === MATH_SPACE_ID
 }
 
+export function isHttpWatchPath(relativePath: string | null): boolean {
+  return getWatchPathSpaceId(relativePath) === HTTP_SPACE_ID
+}
+
 export function toCodeRelativePath(relativePath: string): string | null {
   const normalizedRelativePath = relativePath.toLowerCase()
 
diff --git a/src/main/store/__tests__/preferences.test.ts b/src/main/store/__tests__/preferences.test.ts
index ec2dc595..1e12c4eb 100644
--- a/src/main/store/__tests__/preferences.test.ts
+++ b/src/main/store/__tests__/preferences.test.ts
@@ -166,6 +166,40 @@ describe('preferences store sanitization', () => {
       preferences.get('editor.markdown.legacyMarkdownFlag' as any),
     ).toBeUndefined()
   })
+
+  it('keeps persisted http settings and prunes stale values', async () => {
+    persistedStateByName.preferences = {
+      http: {
+        wrapLines: false,
+        defaultPreviewFormat: 'curl',
+        autoSwitchToResponse: false,
+        garbage: 'bad',
+      },
+    }
+
+    const { default: preferences } = await import('../module/preferences')
+
+    expect(preferences.get('http.wrapLines' as any)).toBe(false)
+    expect(preferences.get('http.defaultPreviewFormat' as any)).toBe('curl')
+    expect(preferences.get('http.autoSwitchToResponse' as any)).toBe(false)
+    expect(preferences.get('http.garbage' as any)).toBeUndefined()
+  })
+
+  it('adds sanitized defaults for invalid http settings', async () => {
+    persistedStateByName.preferences = {
+      http: {
+        wrapLines: 'bad',
+        defaultPreviewFormat: 'bad',
+        autoSwitchToResponse: 'bad',
+      },
+    }
+
+    const { default: preferences } = await import('../module/preferences')
+
+    expect(preferences.get('http.wrapLines' as any)).toBe(true)
+    expect(preferences.get('http.defaultPreviewFormat' as any)).toBe('http')
+    expect(preferences.get('http.autoSwitchToResponse' as any)).toBe(true)
+  })
 })
 
 describe('app store sanitization', () => {
@@ -274,6 +308,54 @@ describe('app store sanitization', () => {
     expect(app.get('notes.dashboard.widgets.garbage' as any)).toBeUndefined()
   })
 
+  it('keeps persisted http layout values', async () => {
+    persistedStateByName.app = {
+      http: {
+        layout: {
+          mode: 'list-editor',
+          environmentsListHeight: 180,
+          threePanel: [20, 30],
+          twoPanel: 35,
+          responsePanelHeight: 360,
+          garbage: 'bad',
+        },
+      },
+    }
+
+    const { default: app } = await import('../module/app')
+
+    expect(app.get('http.layout.mode' as any)).toBe('list-editor')
+    expect(app.get('http.layout.environmentsListHeight' as any)).toBe(180)
+    expect(app.get('http.layout.threePanel' as any)).toEqual([20, 30])
+    expect(app.get('http.layout.twoPanel' as any)).toBe(35)
+    expect(app.get('http.layout.responsePanelHeight' as any)).toBe(360)
+    expect(app.get('http.layout.garbage' as any)).toBeUndefined()
+  })
+
+  it('keeps persisted http donation counters', async () => {
+    persistedStateByName.app = {
+      donations: {
+        copies: { http: 12 },
+        created: { http: 7 },
+        sent: { http: 31 },
+        lastShownCopyMilestones: { http: 25 },
+        lastShownCreatedMilestones: { http: 25 },
+        lastShownSentMilestones: { http: 25 },
+      },
+    }
+
+    const { default: app } = await import('../module/app')
+
+    expect(app.get('donations.copies.http' as any)).toBe(12)
+    expect(app.get('donations.created.http' as any)).toBe(7)
+    expect(app.get('donations.sent.http' as any)).toBe(31)
+    expect(app.get('donations.lastShownCopyMilestones.http' as any)).toBe(25)
+    expect(app.get('donations.lastShownCreatedMilestones.http' as any)).toBe(
+      25,
+    )
+    expect(app.get('donations.lastShownSentMilestones.http' as any)).toBe(25)
+  })
+
   it('keeps persisted notes route when it is a valid string', async () => {
     persistedStateByName.app = {
       notes: {
diff --git a/src/main/store/constants.ts b/src/main/store/constants.ts
index 24dbf40a..b9c16cc9 100644
--- a/src/main/store/constants.ts
+++ b/src/main/store/constants.ts
@@ -5,6 +5,10 @@ export const LAYOUT_DEFAULTS = {
   list: { width: 300, min: 150 },
   editor: { min: 300 },
   tags: { height: 200, min: 80 },
+  http: {
+    environmentsPanel: { height: 200, min: 80 },
+    responsePanel: { height: 300, min: 120 },
+  },
 }
 
 export const EDITOR_DEFAULTS: EditorSettings = {
diff --git a/src/main/store/module/app.ts b/src/main/store/module/app.ts
index 16c20c52..9cfc8f07 100644
--- a/src/main/store/module/app.ts
+++ b/src/main/store/module/app.ts
@@ -2,6 +2,7 @@ import type {
   AppStore,
   CodeState,
   DonationsState,
+  HttpState,
   NotesEditorMode,
   NotesRouteName,
   NotesState,
@@ -35,6 +36,13 @@ const APP_STORE_DEFAULTS: AppStore = {
       tagsListHeight: LAYOUT_DEFAULTS.tags.height,
     },
   },
+  http: {
+    selection: {},
+    layout: {
+      mode: 'all-panels',
+      environmentsListHeight: LAYOUT_DEFAULTS.http.environmentsPanel.height,
+    },
+  },
   notes: {
     selection: {},
     route: 'notes-space',
@@ -61,26 +69,36 @@ const APP_STORE_DEFAULTS: AppStore = {
     currentStreak: 0,
     copies: {
       code: 0,
+      http: 0,
       notes: 0,
       math: 0,
       tools: 0,
     },
     created: {
       code: 0,
+      http: 0,
       notes: 0,
       math: 0,
     },
+    sent: {
+      http: 0,
+    },
     lastShownCopyMilestones: {
       code: 0,
+      http: 0,
       notes: 0,
       math: 0,
       tools: 0,
     },
     lastShownCreatedMilestones: {
       code: 0,
+      http: 0,
       notes: 0,
       math: 0,
     },
+    lastShownSentMilestones: {
+      http: 0,
+    },
     shownStreakMilestones: [],
     lastGreetingDay: '',
   },
@@ -104,6 +122,17 @@ function sanitizeCodeState(value: unknown): CodeState {
   return state
 }
 
+function sanitizeHttpState(value: unknown): HttpState {
+  const source = asRecord(value)
+  const state: HttpState = {}
+
+  if (typeof source.requestId === 'number')
+    state.requestId = source.requestId
+  if (typeof source.folderId === 'number')
+    state.folderId = source.folderId
+  return state
+}
+
 function sanitizeNotesState(value: unknown): NotesState {
   const source = asRecord(value)
   const state: NotesState = {}
@@ -147,8 +176,10 @@ function sanitizeDonations(value: unknown): DonationsState {
   const source = asRecord(value)
   const copiesSource = asRecord(source.copies)
   const createdSource = asRecord(source.created)
+  const sentSource = asRecord(source.sent)
   const copyMilestonesSource = asRecord(source.lastShownCopyMilestones)
   const createdMilestonesSource = asRecord(source.lastShownCreatedMilestones)
+  const sentMilestonesSource = asRecord(source.lastShownSentMilestones)
   const defaults = APP_STORE_DEFAULTS.donations
   const shownStreaks = readOptionalNumberArray(source, 'shownStreakMilestones')
 
@@ -157,21 +188,31 @@ function sanitizeDonations(value: unknown): DonationsState {
     currentStreak: readNumber(source, 'currentStreak', defaults.currentStreak),
     copies: {
       code: readNumber(copiesSource, 'code', defaults.copies.code),
+      http: readNumber(copiesSource, 'http', defaults.copies.http),
       notes: readNumber(copiesSource, 'notes', defaults.copies.notes),
       math: readNumber(copiesSource, 'math', defaults.copies.math),
       tools: readNumber(copiesSource, 'tools', defaults.copies.tools),
     },
     created: {
       code: readNumber(createdSource, 'code', defaults.created.code),
+      http: readNumber(createdSource, 'http', defaults.created.http),
       notes: readNumber(createdSource, 'notes', defaults.created.notes),
       math: readNumber(createdSource, 'math', defaults.created.math),
     },
+    sent: {
+      http: readNumber(sentSource, 'http', defaults.sent.http),
+    },
     lastShownCopyMilestones: {
       code: readNumber(
         copyMilestonesSource,
         'code',
         defaults.lastShownCopyMilestones.code,
       ),
+      http: readNumber(
+        copyMilestonesSource,
+        'http',
+        defaults.lastShownCopyMilestones.http,
+      ),
       notes: readNumber(
         copyMilestonesSource,
         'notes',
@@ -194,6 +235,11 @@ function sanitizeDonations(value: unknown): DonationsState {
         'code',
         defaults.lastShownCreatedMilestones.code,
       ),
+      http: readNumber(
+        createdMilestonesSource,
+        'http',
+        defaults.lastShownCreatedMilestones.http,
+      ),
       notes: readNumber(
         createdMilestonesSource,
         'notes',
@@ -205,6 +251,13 @@ function sanitizeDonations(value: unknown): DonationsState {
         defaults.lastShownCreatedMilestones.math,
       ),
     },
+    lastShownSentMilestones: {
+      http: readNumber(
+        sentMilestonesSource,
+        'http',
+        defaults.lastShownSentMilestones.http,
+      ),
+    },
     shownStreakMilestones: shownStreaks ?? [...defaults.shownStreakMilestones],
     lastGreetingDay: readString(
       source,
@@ -218,10 +271,12 @@ function sanitizeAppStore(value: unknown): AppStore {
   const source = asRecord(value)
   const windowSource = asRecord(source.window)
   const codeSource = asRecord(source.code)
+  const httpSource = asRecord(source.http)
   const notesSource = asRecord(source.notes)
   const notificationsSource = asRecord(source.notifications)
   const legacySizes = asRecord(source.sizes)
   const codeLayoutSource = asRecord(codeSource.layout)
+  const httpLayoutSource = asRecord(httpSource.layout)
   const notesLayoutSource = asRecord(notesSource.layout)
 
   return {
@@ -274,6 +329,41 @@ function sanitizeAppStore(value: unknown): AppStore {
           ?? undefined,
       },
     },
+    http: {
+      selection: sanitizeHttpState(httpSource.selection),
+      layout: {
+        mode: readEnum(
+          httpLayoutSource,
+          'mode',
+          ['all-panels', 'list-editor', 'editor-only'] as const,
+          APP_STORE_DEFAULTS.http.layout.mode,
+        ),
+        environmentsListHeight: (() => {
+          const raw = readNumber(
+            httpLayoutSource,
+            'environmentsListHeight',
+            LAYOUT_DEFAULTS.http.environmentsPanel.height,
+          )
+          return raw < LAYOUT_DEFAULTS.http.environmentsPanel.min
+            ? LAYOUT_DEFAULTS.http.environmentsPanel.height
+            : raw
+        })(),
+        threePanel: readOptionalNumberArray(httpLayoutSource, 'threePanel'),
+        twoPanel: readOptionalNumber(httpLayoutSource, 'twoPanel') ?? undefined,
+        responsePanelHeight: (() => {
+          const raw = readOptionalNumber(
+            httpLayoutSource,
+            'responsePanelHeight',
+          )
+          if (raw === undefined) {
+            return undefined
+          }
+          return raw < LAYOUT_DEFAULTS.http.responsePanel.min
+            ? LAYOUT_DEFAULTS.http.responsePanel.height
+            : raw
+        })(),
+      },
+    },
     notes: {
       selection: sanitizeNotesState(
         Object.keys(asRecord(notesSource.selection)).length > 0
@@ -375,7 +465,7 @@ function sanitizeAppStore(value: unknown): AppStore {
     activeSpaceId: readEnum(
       source,
       'activeSpaceId',
-      ['code', 'tools', 'math', 'notes'] as const,
+      ['code', 'tools', 'math', 'notes', 'http'] as const,
       APP_STORE_DEFAULTS.activeSpaceId,
     ) as SpaceId,
   }
diff --git a/src/main/store/module/preferences.ts b/src/main/store/module/preferences.ts
index f400d584..04125263 100644
--- a/src/main/store/module/preferences.ts
+++ b/src/main/store/module/preferences.ts
@@ -1,5 +1,6 @@
 import type {
   EditorSettings,
+  HttpSettings,
   MarkdownSettings,
   MathSettings,
   NotesEditorSettings,
@@ -27,6 +28,12 @@ const MATH_DEFAULTS: MathSettings = {
   dateFormat: 'numeric',
 }
 
+const HTTP_DEFAULTS: HttpSettings = {
+  wrapLines: true,
+  defaultPreviewFormat: 'http',
+  autoSwitchToResponse: true,
+}
+
 const PREFERENCES_DEFAULTS: PreferencesStore = {
   appearance: {
     theme: 'auto',
@@ -49,6 +56,7 @@ const PREFERENCES_DEFAULTS: PreferencesStore = {
     },
   },
   math: MATH_DEFAULTS,
+  http: HTTP_DEFAULTS,
 }
 
 function sanitizeCodeEditorSettings(value: unknown): EditorSettings {
@@ -170,6 +178,27 @@ function sanitizeMathSettings(value: unknown): MathSettings {
   }
 }
 
+function sanitizeHttpSettings(value: unknown): HttpSettings {
+  const source = asRecord(value)
+
+  return {
+    wrapLines:
+      typeof source.wrapLines === 'boolean'
+        ? source.wrapLines
+        : HTTP_DEFAULTS.wrapLines,
+    defaultPreviewFormat: readEnum(
+      source,
+      'defaultPreviewFormat',
+      ['http', 'curl'] as const,
+      HTTP_DEFAULTS.defaultPreviewFormat,
+    ),
+    autoSwitchToResponse:
+      typeof source.autoSwitchToResponse === 'boolean'
+        ? source.autoSwitchToResponse
+        : HTTP_DEFAULTS.autoSwitchToResponse,
+  }
+}
+
 function sanitizePreferences(value: unknown): PreferencesStore {
   const source = asRecord(value)
   const appearanceSource = asRecord(source.appearance)
@@ -190,6 +219,7 @@ function sanitizePreferences(value: unknown): PreferencesStore {
       ? asRecord(editorSource.markdown)
       : asRecord(source.markdown)
   const mathSource = asRecord(source.math)
+  const httpSource = asRecord(source.http)
 
   return {
     appearance: {
@@ -239,6 +269,7 @@ function sanitizePreferences(value: unknown): PreferencesStore {
       markdown: sanitizeMarkdownSettings(markdownSource),
     },
     math: sanitizeMathSettings(mathSource),
+    http: sanitizeHttpSettings(httpSource),
   }
 }
 
diff --git a/src/main/store/types/index.ts b/src/main/store/types/index.ts
index 02f6fdea..bd64c575 100644
--- a/src/main/store/types/index.ts
+++ b/src/main/store/types/index.ts
@@ -16,6 +16,11 @@ export interface NotesState {
   libraryFilter?: string
 }
 
+export interface HttpState {
+  requestId?: number
+  folderId?: number
+}
+
 export type NotesRouteName =
   | 'notes-space'
   | 'notes-space/dashboard'
@@ -29,33 +34,43 @@ export interface NotesDashboardWidgets {
   topLinked: boolean
 }
 
-export type SpaceId = 'code' | 'tools' | 'math' | 'notes'
+export type SpaceId = 'code' | 'tools' | 'math' | 'notes' | 'http'
 
 export interface DonationsState {
   lastActiveDay: string
   currentStreak: number
   copies: {
     code: number
+    http: number
     notes: number
     math: number
     tools: number
   }
   created: {
     code: number
+    http: number
     notes: number
     math: number
   }
+  sent: {
+    http: number
+  }
   lastShownCopyMilestones: {
     code: number
+    http: number
     notes: number
     math: number
     tools: number
   }
   lastShownCreatedMilestones: {
     code: number
+    http: number
     notes: number
     math: number
   }
+  lastShownSentMilestones: {
+    http: number
+  }
   shownStreakMilestones: number[]
   lastGreetingDay: string
 }
@@ -90,6 +105,16 @@ export interface AppStore {
       twoPanel?: number
     }
   }
+  http: {
+    selection: HttpState
+    layout: {
+      mode: SpaceLayoutMode
+      environmentsListHeight: number
+      threePanel?: number[]
+      twoPanel?: number
+      responsePanelHeight?: number
+    }
+  }
   notifications: {
     lastNotifiedUpdateVersion: string
   }
@@ -133,6 +158,12 @@ export interface MathSettings {
   dateFormat: 'numeric' | 'short' | 'long'
 }
 
+export interface HttpSettings {
+  wrapLines: boolean
+  defaultPreviewFormat: 'http' | 'curl'
+  autoSwitchToResponse: boolean
+}
+
 export interface PreferencesStore {
   appearance: {
     theme: string
@@ -152,6 +183,7 @@ export interface PreferencesStore {
     markdown: MarkdownSettings
   }
   math: MathSettings
+  http: HttpSettings
 }
 
 export interface MathSheet {
diff --git a/src/main/types/http.ts b/src/main/types/http.ts
new file mode 100644
index 00000000..8e26489a
--- /dev/null
+++ b/src/main/types/http.ts
@@ -0,0 +1,76 @@
+export type HttpMethod =
+  | 'GET'
+  | 'POST'
+  | 'PUT'
+  | 'PATCH'
+  | 'DELETE'
+  | 'HEAD'
+  | 'OPTIONS'
+
+export type HttpBodyType =
+  | 'none'
+  | 'json'
+  | 'text'
+  | 'form-urlencoded'
+  | 'multipart'
+
+export type HttpAuthType = 'none' | 'bearer' | 'basic'
+
+export interface HttpHeaderEntry {
+  key: string
+  value: string
+  description?: string
+  enabled?: boolean
+}
+
+export interface HttpQueryEntry {
+  key: string
+  value: string
+  description?: string
+  enabled?: boolean
+}
+
+export interface HttpFormDataEntry {
+  key: string
+  type: 'text' | 'file'
+  value: string
+}
+
+export interface HttpAuth {
+  type: HttpAuthType
+  token?: string
+  username?: string
+  password?: string
+}
+
+export interface HttpExecuteRequest {
+  method: HttpMethod
+  url: string
+  headers: HttpHeaderEntry[]
+  query: HttpQueryEntry[]
+  bodyType: HttpBodyType
+  body: string | null
+  formData: HttpFormDataEntry[]
+  auth: HttpAuth
+}
+
+export interface HttpExecutePayload {
+  request: HttpExecuteRequest
+  requestId: number | null
+  environmentId: number | null
+  timeoutMs?: number
+}
+
+export type HttpResponseBodyKind = 'text' | 'json' | 'binary'
+
+export interface HttpExecuteResult {
+  status: number | null
+  statusText: string
+  headers: HttpHeaderEntry[]
+  body: string
+  bodyKind: HttpResponseBodyKind
+  durationMs: number
+  sizeBytes: number
+  truncated: boolean
+  error?: string
+}
diff --git a/src/main/types/ipc.ts b/src/main/types/ipc.ts
index 6c48f3fc..d1a501f3 100644
--- a/src/main/types/ipc.ts
+++ b/src/main/types/ipc.ts
@@ -43,6 +43,7 @@ type SystemAction =
   | 'reload'
   | 'move-vault'
   | 'open-external'
+  | 'show-http-request-in-file-manager'
   | 'show-notes-folder-in-file-manager'
   | 'show-note-in-file-manager'
   | 'deep-link'
@@ -55,7 +56,7 @@ type SystemAction =
 type PrettierAction = 'format'
 type FsAction = 'assets' | 'notes-asset'
 type ThemeAction = 'list' | 'get' | 'open-dir' | 'create-template' | 'changed'
-type SpacesAction = 'math:read' | 'math:write'
+type SpacesAction = 'math:read' | 'math:write' | 'http:execute'
 
 export type MainMenuChannel = CombineWith<MainMenuAction, 'main-menu'>
 export type DBChannel = CombineWith<DBAction, 'db'>
diff --git a/src/main/types/menu.ts b/src/main/types/menu.ts
index 4bea7f2e..a79ced28 100644
--- a/src/main/types/menu.ts
+++ b/src/main/types/menu.ts
@@ -6,7 +6,7 @@ export type MainMenuPrimaryAction =
   | 'new-sheet'
   | null
 export type MainMenuSecondaryAction = 'new-folder' | null
-export type MainMenuEditorKind = 'code' | 'notes' | null
+export type MainMenuEditorKind = 'code' | 'notes' | 'http' | null
 export type MainMenuNotesEditorMode = 'raw' | 'livePreview' | 'preview' | null
 
 export interface MainMenuFileContext {
@@ -29,6 +29,7 @@ export interface MainMenuViewContext {
 export interface MainMenuEditorContext {
   kind: MainMenuEditorKind
   noteMode: MainMenuNotesEditorMode
+  canSendRequest: boolean
   canFormat: boolean
   canPreviewCode: boolean
   isCodePreviewShown: boolean
diff --git a/src/renderer/components/notes/cm-extensions/codeHighlight.ts b/src/renderer/components/cm-extensions/codeHighlight.ts
similarity index 100%
rename from src/renderer/components/notes/cm-extensions/codeHighlight.ts
rename to src/renderer/components/cm-extensions/codeHighlight.ts
diff --git a/src/renderer/components/notes/cm-extensions/scrollbarTheme.ts b/src/renderer/components/cm-extensions/scrollbarTheme.ts
similarity index 92%
rename from src/renderer/components/notes/cm-extensions/scrollbarTheme.ts
rename to src/renderer/components/cm-extensions/scrollbarTheme.ts
index 59301624..fe411788 100644
--- a/src/renderer/components/notes/cm-extensions/scrollbarTheme.ts
+++ b/src/renderer/components/cm-extensions/scrollbarTheme.ts
@@ -1,4 +1,4 @@
-export const notesEditorScrollbarTheme = {
+export const editorScrollbarTheme = {
   '.cm-scroller': {
     overflow: 'auto',
     scrollbarWidth: 'auto',
diff --git a/src/renderer/components/devtools/compare/JsonDiffInput.vue b/src/renderer/components/devtools/compare/JsonDiffInput.vue
index b5f81672..0db4e241 100644
--- a/src/renderer/components/devtools/compare/JsonDiffInput.vue
+++ b/src/renderer/components/devtools/compare/JsonDiffInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notesEditorScrollbarTheme } from '@/components/notes/cm-extensions/scrollbarTheme'
+import { editorScrollbarTheme } from '@/components/cm-extensions/scrollbarTheme'
 import {
   defaultKeymap,
   history,
@@ -79,7 +79,7 @@ function createJsonDiffTheme() {
     '.cm-placeholder': {
       color: 'var(--muted-foreground)',
     },
-    ...notesEditorScrollbarTheme,
+    ...editorScrollbarTheme,
   })
 }
 
diff --git a/src/renderer/components/http/BodyEditor.vue b/src/renderer/components/http/BodyEditor.vue
new file mode 100644
index 00000000..7091b35b
--- /dev/null
+++ b/src/renderer/components/http/BodyEditor.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { Extension } from '@codemirror/state'
+import { createCodeHighlight } from '@/components/cm-extensions/codeHighlight'
+import { editorScrollbarTheme } from '@/components/cm-extensions/scrollbarTheme'
+import { useHttpEnvironments, useTheme } from '@/composables'
+import { i18n } from '@/electron'
+import {
+  defaultKeymap,
+  history,
+  historyKeymap,
+  indentWithTab,
+} from '@codemirror/commands'
+import { json } from '@codemirror/lang-json'
+import { indentUnit } from '@codemirror/language'
+import { Compartment, EditorState } from '@codemirror/state'
+import {
+  EditorView,
+  highlightActiveLineGutter,
+  keymap,
+  lineNumbers,
+  placeholder,
+} from '@codemirror/view'
+import {
+  refreshVariables,
+  varInterpolationExtension,
+} from './cm-extensions/varInterpolation'
+
+interface Props {
+  language?: 'json' | 'text' | 'form-urlencoded'
+  placeholder?: string
+  wrapLines?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  language: 'text',
+  wrapLines: true,
+})
+
+const { '.cm-scroller': editorScrollerTheme, ...editorScrollbarRestTheme }
+  = editorScrollbarTheme
+
+const model = defineModel<string>({ default: '' })
+const editorContainer = ref<HTMLElement>()
+
+const { activeEnvironment } = useHttpEnvironments()
+const { isDark } = useTheme()
+
+let view: EditorView | null = null
+let isApplyingExternalValue = false
+const languageCompartment = new Compartment()
+const highlightCompartment = new Compartment()
+const themeCompartment = new Compartment()
+const wrapCompartment = new Compartment()
+
+function getVariables(): Record<string, string> {
+  return (activeEnvironment.value?.variables as Record<string, string>) ?? {}
+}
+
+const isJsonInvalid = ref(false)
+
+function validateJson(value: string) {
+  if (props.language !== 'json') {
+    isJsonInvalid.value = false
+    return
+  }
+  if (!value.trim()) {
+    isJsonInvalid.value = false
+    return
+  }
+  try {
+    JSON.parse(value)
+    isJsonInvalid.value = false
+  }
+  catch {
+    isJsonInvalid.value = true
+  }
+}
+
+function getLanguageExtension(): Extension {
+  if (props.language === 'json')
+    return json()
+  return []
+}
+
+function createBodyEditorTheme(wrapLines: boolean) {
+  return EditorView.theme({
+    '&': {
+      height: '100%',
+      minHeight: '14rem',
+      backgroundColor: 'var(--background)',
+      color: 'var(--foreground)',
+      fontSize: '12px',
+      fontFamily: 'var(--font-mono)',
+    },
+    '.cm-scroller': {
+      ...editorScrollerTheme,
+      height: '100%',
+    },
+    '.cm-content': {
+      ...(wrapLines
+        ? {
+            boxSizing: 'border-box',
+            width: '100%',
+          }
+        : {
+            minWidth: 'max-content',
+          }),
+      padding: '0.5rem 0.75rem',
+      caretColor: 'var(--foreground)',
+    },
+    '.cm-line': {
+      padding: '0',
+      ...(wrapLines
+        ? {
+            overflowWrap: 'anywhere',
+            wordBreak: 'break-word',
+          }
+        : {}),
+    },
+    '.cm-gutters': {
+      borderRight: '1px solid var(--border)',
+      backgroundColor: 'var(--background)',
+      color: 'var(--muted-foreground)',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '2rem',
+      padding: '0 0.5rem',
+      fontSize: '11px',
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent',
+      color: 'var(--foreground)',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-cursor': {
+      borderLeftColor: 'var(--foreground)',
+    },
+    '.cm-activeLine': {
+      backgroundColor: 'transparent',
+    },
+    '.cm-selectionBackground': {
+      backgroundColor:
+        'color-mix(in oklch, var(--primary) 24%, transparent) !important',
+    },
+    '&.cm-focused .cm-selectionBackground': {
+      backgroundColor:
+        'color-mix(in oklch, var(--primary) 24%, transparent) !important',
+    },
+    '.cm-placeholder': {
+      color: 'var(--muted-foreground)',
+    },
+    ...editorScrollbarRestTheme,
+  })
+}
+
+function createEditorState(doc: string): EditorState {
+  const extensions: Extension[] = [
+    themeCompartment.of(createBodyEditorTheme(props.wrapLines)),
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    wrapCompartment.of(props.wrapLines ? EditorView.lineWrapping : []),
+    history(),
+    indentUnit.of('  '),
+    keymap.of([indentWithTab, ...defaultKeymap, ...historyKeymap]),
+    placeholder(props.placeholder ?? ''),
+    languageCompartment.of(getLanguageExtension()),
+    highlightCompartment.of(createCodeHighlight(isDark.value)),
+    varInterpolationExtension({ getVariables }),
+    EditorView.updateListener.of((update) => {
+      if (!update.docChanged || isApplyingExternalValue)
+        return
+      model.value = update.state.doc.toString()
+    }),
+    EditorView.domEventHandlers({
+      blur() {
+        validateJson(view?.state.doc.toString() ?? '')
+        return false
+      },
+    }),
+  ]
+
+  return EditorState.create({ doc, extensions })
+}
+
+watch(model, (value) => {
+  if (!view)
+    return
+  const current = view.state.doc.toString()
+  if (current === value)
+    return
+  isApplyingExternalValue = true
+  view.dispatch({
+    changes: { from: 0, to: current.length, insert: value ?? '' },
+  })
+  isApplyingExternalValue = false
+})
+
+watch(
+  () => props.language,
+  () => {
+    if (!view)
+      return
+    view.dispatch({
+      effects: languageCompartment.reconfigure(getLanguageExtension()),
+    })
+    if (props.language !== 'json')
+      isJsonInvalid.value = false
+  },
+)
+
+watch(isDark, () => {
+  if (!view)
+    return
+  view.dispatch({
+    effects: highlightCompartment.reconfigure(
+      createCodeHighlight(isDark.value),
+    ),
+  })
+})
+
+watch(
+  () => props.wrapLines,
+  () => {
+    if (!view)
+      return
+    view.dispatch({
+      effects: [
+        themeCompartment.reconfigure(createBodyEditorTheme(props.wrapLines)),
+        wrapCompartment.reconfigure(
+          props.wrapLines ? EditorView.lineWrapping : [],
+        ),
+      ],
+    })
+  },
+)
+
+watch(
+  () => activeEnvironment.value?.variables,
+  () => {
+    if (view)
+      refreshVariables(view)
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  if (!editorContainer.value)
+    return
+  view = new EditorView({
+    state: createEditorState(model.value),
+    parent: editorContainer.value,
+  })
+})
+
+onUnmounted(() => {
+  view?.destroy()
+  view = null
+})
+</script>
+
+<template>
+  <div class="flex min-h-0 flex-col gap-1">
+    <div
+      class="bg-background min-h-0 flex-1 overflow-hidden rounded-md border"
+      :class="isJsonInvalid ? 'border-red-500' : 'border-input'"
+    >
+      <div
+        ref="editorContainer"
+        class="h-full min-h-[14rem] cursor-text"
+      />
+    </div>
+    <div
+      v-if="isJsonInvalid"
+      class="text-xs text-red-500"
+    >
+      {{ i18n.t("spaces.http.editor.body.jsonInvalid") }}
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/BottomPanel.vue b/src/renderer/components/http/BottomPanel.vue
new file mode 100644
index 00000000..20d783ce
--- /dev/null
+++ b/src/renderer/components/http/BottomPanel.vue
@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import type { HttpRequestPreviewFormat } from './requestPreview'
+import * as Select from '@/components/ui/shadcn/select'
+import * as Tabs from '@/components/ui/shadcn/tabs'
+import {
+  useCopyToClipboard,
+  useDonations,
+  useHttpEnvironments,
+  useHttpExecute,
+  useHttpRequests,
+  useHttpSettings,
+} from '@/composables'
+import { i18n } from '@/electron'
+import { Copy } from 'lucide-vue-next'
+import { buildRequestPreview } from './requestPreview'
+
+type BottomPanelTab = 'preview' | 'response'
+
+const { currentDraft } = useHttpRequests()
+const { activeEnvironment } = useHttpEnvironments()
+const { isExecuting, lastError, lastResponse } = useHttpExecute()
+const { settings } = useHttpSettings()
+const copy = useCopyToClipboard()
+const { incrementCopy } = useDonations()
+
+const activeTab = ref<BottomPanelTab>('preview')
+const previewFormat = computed<HttpRequestPreviewFormat>({
+  get: () => settings.defaultPreviewFormat,
+  set: (value) => {
+    settings.defaultPreviewFormat = value
+  },
+})
+
+const previewVariables = computed<Record<string, string>>(() => {
+  return (activeEnvironment.value?.variables as Record<string, string>) ?? {}
+})
+
+const previewContent = computed(() => {
+  if (!currentDraft.value)
+    return ''
+  return buildRequestPreview(currentDraft.value, previewFormat.value, {
+    variables: previewVariables.value,
+  })
+})
+
+const statusClass = computed(() => {
+  const status = lastResponse.value?.status
+  if (!status)
+    return 'text-muted-foreground'
+  if (status >= 200 && status < 300)
+    return 'text-green-500'
+  if (status >= 300 && status < 400)
+    return 'text-blue-500'
+  if (status >= 400 && status < 500)
+    return 'text-yellow-500'
+  return 'text-red-500'
+})
+
+function formatSize(bytes: number): string {
+  if (bytes < 1024)
+    return `${bytes} B`
+  if (bytes < 1024 * 1024)
+    return `${(bytes / 1024).toFixed(1)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000)
+    return `${ms} ms`
+  return `${(ms / 1000).toFixed(2)} s`
+}
+
+watch(lastResponse, (response, previous) => {
+  if (settings.autoSwitchToResponse && response && response !== previous) {
+    activeTab.value = 'response'
+  }
+})
+
+watch(isExecuting, (executing) => {
+  if (settings.autoSwitchToResponse && executing) {
+    activeTab.value = 'response'
+  }
+})
+
+watch(lastError, (error) => {
+  if (settings.autoSwitchToResponse && error) {
+    activeTab.value = 'response'
+  }
+})
+
+function copyPreview() {
+  if (previewContent.value) {
+    copy(previewContent.value)
+    incrementCopy('http')
+  }
+}
+</script>
+
+<template>
+  <Tabs.Tabs
+    v-model="activeTab"
+    class="flex h-full min-h-0 flex-col gap-0"
+  >
+    <div
+      class="border-border flex items-center justify-between border-b px-3 py-1"
+    >
+      <Tabs.TabsList>
+        <Tabs.TabsTrigger value="preview">
+          {{ i18n.t("spaces.http.editor.panels.preview") }}
+        </Tabs.TabsTrigger>
+        <Tabs.TabsTrigger value="response">
+          {{ i18n.t("spaces.http.editor.panels.response") }}
+        </Tabs.TabsTrigger>
+      </Tabs.TabsList>
+
+      <div
+        v-if="activeTab === 'preview'"
+        class="flex items-center gap-1"
+      >
+        <Select.Select v-model="previewFormat">
+          <Select.SelectTrigger class="w-24">
+            <Select.SelectValue />
+          </Select.SelectTrigger>
+          <Select.SelectContent>
+            <Select.SelectItem value="http">
+              {{ i18n.t("spaces.http.editor.preview.formats.http") }}
+            </Select.SelectItem>
+            <Select.SelectItem value="curl">
+              {{ i18n.t("spaces.http.editor.preview.formats.curl") }}
+            </Select.SelectItem>
+          </Select.SelectContent>
+        </Select.Select>
+
+        <UiActionButton
+          :tooltip="i18n.t('spaces.http.editor.response.copy')"
+          :disabled="!previewContent"
+          @click="copyPreview"
+        >
+          <Copy class="size-4" />
+        </UiActionButton>
+      </div>
+
+      <div
+        v-else-if="activeTab === 'response' && lastResponse"
+        class="flex min-w-0 items-center gap-4 text-xs"
+      >
+        <div class="flex min-w-0 items-center gap-1">
+          <span class="text-muted-foreground">
+            {{ i18n.t("spaces.http.editor.response.status") }}:
+          </span>
+          <span
+            class="font-mono font-semibold"
+            :class="statusClass"
+          >
+            {{ lastResponse.status ?? "-" }}
+            <template v-if="lastResponse.statusText">
+              {{ lastResponse.statusText }}
+            </template>
+          </span>
+        </div>
+        <div class="flex items-center gap-1">
+          <span class="text-muted-foreground">
+            {{ i18n.t("spaces.http.editor.response.time") }}:
+          </span>
+          <span class="font-mono">{{
+            formatDuration(lastResponse.durationMs)
+          }}</span>
+        </div>
+        <div class="flex items-center gap-1">
+          <span class="text-muted-foreground">
+            {{ i18n.t("spaces.http.editor.response.size") }}:
+          </span>
+          <span class="font-mono">{{
+            formatSize(lastResponse.sizeBytes)
+          }}</span>
+        </div>
+        <span
+          v-if="lastResponse.truncated"
+          class="bg-muted text-muted-foreground rounded px-1.5 py-0.5 text-[10px]"
+        >
+          {{ i18n.t("spaces.http.editor.response.truncated") }}
+        </span>
+      </div>
+    </div>
+
+    <div class="min-h-0 flex-1">
+      <Tabs.TabsContent
+        value="preview"
+        class="m-0 h-full"
+      >
+        <HttpRequestPreviewPanel
+          :content="previewContent"
+          :format="previewFormat"
+          :wrap-lines="settings.wrapLines"
+        />
+      </Tabs.TabsContent>
+      <Tabs.TabsContent
+        value="response"
+        class="m-0 h-full"
+      >
+        <HttpResponsePanel />
+      </Tabs.TabsContent>
+    </div>
+  </Tabs.Tabs>
+</template>
diff --git a/src/renderer/components/http/CodeViewer.vue b/src/renderer/components/http/CodeViewer.vue
new file mode 100644
index 00000000..44fbe630
--- /dev/null
+++ b/src/renderer/components/http/CodeViewer.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import type { Extension } from '@codemirror/state'
+import { createCodeHighlight } from '@/components/cm-extensions/codeHighlight'
+import { editorScrollbarTheme } from '@/components/cm-extensions/scrollbarTheme'
+import { useTheme } from '@/composables'
+import { json } from '@codemirror/lang-json'
+import { StreamLanguage } from '@codemirror/language'
+import { http } from '@codemirror/legacy-modes/mode/http'
+import { shell } from '@codemirror/legacy-modes/mode/shell'
+import { EditorState } from '@codemirror/state'
+import {
+  drawSelection,
+  EditorView,
+  highlightActiveLineGutter,
+  keymap,
+  lineNumbers,
+} from '@codemirror/view'
+
+type CodeViewerLanguage = 'plain' | 'json' | 'http' | 'shell'
+
+const props = withDefaults(
+  defineProps<{
+    content: string
+    language?: CodeViewerLanguage
+    wrapLines?: boolean
+  }>(),
+  {
+    wrapLines: true,
+  },
+)
+
+const { '.cm-scroller': editorScrollerTheme, ...editorScrollbarRestTheme }
+  = editorScrollbarTheme
+
+const { isDark } = useTheme()
+const editorContainer = ref<HTMLElement>()
+
+let view: EditorView | null = null
+
+function createViewerTheme(wrapLines: boolean) {
+  return EditorView.theme({
+    '&': {
+      height: '100%',
+      backgroundColor: 'var(--background)',
+      color: 'var(--foreground)',
+      fontSize: '12px',
+      fontFamily: 'var(--font-mono)',
+    },
+    '.cm-scroller': {
+      ...editorScrollerTheme,
+      height: '100%',
+    },
+    '.cm-content': {
+      ...(wrapLines
+        ? {
+            boxSizing: 'border-box',
+            width: '100%',
+          }
+        : {
+            minWidth: 'max-content',
+          }),
+      padding: '0.5rem 0.75rem',
+      caretColor: 'transparent',
+    },
+    '.cm-line': {
+      padding: '0',
+      ...(wrapLines
+        ? {
+            overflowWrap: 'anywhere',
+            wordBreak: 'break-word',
+          }
+        : {}),
+    },
+    '.cm-gutters': {
+      borderRight: '1px solid var(--border)',
+      backgroundColor: 'var(--background)',
+      color: 'var(--muted-foreground)',
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+      minWidth: '2rem',
+      padding: '0 0.5rem',
+      fontSize: '11px',
+    },
+    '.cm-activeLineGutter': {
+      backgroundColor: 'transparent',
+      color: 'var(--foreground)',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-selectionBackground': {
+      backgroundColor:
+        'color-mix(in oklch, var(--primary) 24%, transparent) !important',
+    },
+    '&.cm-focused .cm-selectionBackground': {
+      backgroundColor:
+        'color-mix(in oklch, var(--primary) 24%, transparent) !important',
+    },
+    ...editorScrollbarRestTheme,
+  })
+}
+
+function createEditorState(doc: string): EditorState {
+  const extensions: Extension[] = [
+    createViewerTheme(props.wrapLines),
+    lineNumbers(),
+    highlightActiveLineGutter(),
+    drawSelection(),
+    EditorState.readOnly.of(true),
+    EditorView.editable.of(false),
+    keymap.of([]),
+    createCodeHighlight(isDark.value),
+  ]
+
+  if (props.wrapLines) {
+    extensions.push(EditorView.lineWrapping)
+  }
+
+  if (props.language === 'json') {
+    extensions.push(json())
+  }
+  else if (props.language === 'http') {
+    extensions.push(StreamLanguage.define(http))
+  }
+  else if (props.language === 'shell') {
+    extensions.push(StreamLanguage.define(shell))
+  }
+
+  return EditorState.create({ doc, extensions })
+}
+
+watch(
+  () => [props.content, props.language, props.wrapLines, isDark.value] as const,
+  ([content]) => {
+    if (!view)
+      return
+
+    view.setState(createEditorState(content))
+  },
+)
+
+onMounted(() => {
+  if (!editorContainer.value)
+    return
+
+  view = new EditorView({
+    state: createEditorState(props.content),
+    parent: editorContainer.value,
+  })
+})
+
+onUnmounted(() => {
+  view?.destroy()
+  view = null
+})
+</script>
+
+<template>
+  <div
+    ref="editorContainer"
+    class="h-full min-h-0"
+  />
+</template>
diff --git a/src/renderer/components/http/EnvironmentManagerDialog.vue b/src/renderer/components/http/EnvironmentManagerDialog.vue
new file mode 100644
index 00000000..ae42a16e
--- /dev/null
+++ b/src/renderer/components/http/EnvironmentManagerDialog.vue
@@ -0,0 +1,334 @@
+<script setup lang="ts">
+import type { HttpEnvironment } from '@/composables'
+import * as Dialog from '@/components/ui/shadcn/dialog'
+import { useDialog, useHttpEnvironments } from '@/composables'
+import { i18n } from '@/electron'
+import { useDebounceFn } from '@vueuse/core'
+import { Plus, Trash2 } from 'lucide-vue-next'
+
+interface VariableEntry {
+  key: string
+  value: string
+}
+
+const AUTO_SAVE_DEBOUNCE_MS = 500
+
+const open = defineModel<boolean>('open', { required: true })
+
+const VARIABLE_COLUMNS = [
+  {
+    key: 'key',
+    label: i18n.t('spaces.http.environments.varKey'),
+    placeholder: i18n.t('spaces.http.environments.varKey'),
+  },
+  {
+    key: 'value',
+    label: i18n.t('spaces.http.environments.varValue'),
+    placeholder: i18n.t('spaces.http.environments.varValue'),
+  },
+]
+
+const {
+  environments,
+  activeEnvironmentId,
+  createHttpEnvironment,
+  deleteHttpEnvironment,
+  getHttpEnvironments,
+  updateHttpEnvironment,
+} = useHttpEnvironments()
+const { confirm } = useDialog()
+
+const selectedEnvId = ref<number | null>(null)
+const localName = ref('')
+const localVariables = ref<VariableEntry[]>([])
+let isSyncing = false
+
+const selectedEnv = computed<HttpEnvironment | null>(
+  () =>
+    environments.value.find(env => env.id === selectedEnvId.value) ?? null,
+)
+
+const variablesRecord = computed<Record<string, string>>(() => {
+  const record: Record<string, string> = {}
+  for (const entry of localVariables.value) {
+    if (entry.key) {
+      record[entry.key] = entry.value
+    }
+  }
+  return record
+})
+
+const isDirty = computed(() => {
+  const env = selectedEnv.value
+  if (!env)
+    return false
+  if (env.name !== localName.value)
+    return true
+  if (JSON.stringify(env.variables) !== JSON.stringify(variablesRecord.value)) {
+    return true
+  }
+  return false
+})
+
+function syncLocalFromEnv(env: HttpEnvironment | null) {
+  isSyncing = true
+  if (!env) {
+    localName.value = ''
+    localVariables.value = []
+  }
+  else {
+    localName.value = env.name
+    localVariables.value = Object.entries(env.variables).map(
+      ([key, value]) => ({ key, value }),
+    )
+  }
+  nextTick(() => {
+    isSyncing = false
+  })
+}
+
+watch(selectedEnvId, () => {
+  syncLocalFromEnv(selectedEnv.value)
+})
+
+watch(open, async (isOpen) => {
+  if (!isOpen) {
+    await flushPendingUpdate()
+    return
+  }
+  await getHttpEnvironments()
+  const stillExists
+    = selectedEnvId.value !== null
+      && environments.value.some(env => env.id === selectedEnvId.value)
+  if (stillExists) {
+    syncLocalFromEnv(selectedEnv.value)
+    return
+  }
+  const nextId = activeEnvironmentId.value ?? environments.value[0]?.id ?? null
+  if (selectedEnvId.value === nextId) {
+    syncLocalFromEnv(selectedEnv.value)
+  }
+  else {
+    selectedEnvId.value = nextId
+  }
+})
+
+async function flushUpdate() {
+  const env = selectedEnv.value
+  if (!env || !isDirty.value)
+    return
+  const payload: { name?: string, variables?: Record<string, string> } = {}
+  const trimmedName = localName.value.trim()
+  if (trimmedName && trimmedName !== env.name)
+    payload.name = trimmedName
+  if (JSON.stringify(env.variables) !== JSON.stringify(variablesRecord.value)) {
+    payload.variables = variablesRecord.value
+  }
+  if (!payload.name && !payload.variables)
+    return
+  await updateHttpEnvironment(env.id, payload)
+}
+
+const debouncedUpdate = useDebounceFn(flushUpdate, AUTO_SAVE_DEBOUNCE_MS)
+
+async function flushPendingUpdate() {
+  if (selectedEnv.value && isDirty.value) {
+    await flushUpdate()
+  }
+}
+
+watch(
+  [localName, () => variablesRecord.value],
+  () => {
+    if (isSyncing)
+      return
+    if (!isDirty.value)
+      return
+    void debouncedUpdate()
+  },
+  { deep: true },
+)
+
+function getNextUntitledName(): string {
+  const base = i18n.t('spaces.http.environments.untitled')
+  const existing = new Set(
+    environments.value.map(env => env.name.trim().toLowerCase()),
+  )
+  if (!existing.has(base.toLowerCase()))
+    return base
+  let index = 2
+  while (existing.has(`${base} ${index}`.toLowerCase())) index += 1
+  return `${base} ${index}`
+}
+
+function hasVariableContent(variable: VariableEntry): boolean {
+  return Boolean(variable.key.trim() || variable.value.trim())
+}
+
+function isUntitledEnvironmentName(name: string): boolean {
+  const base = i18n.t('spaces.http.environments.untitled')
+  return name === base || name.startsWith(`${base} `)
+}
+
+function isEnvironmentEmpty(): boolean {
+  const name = localName.value.trim()
+  return (
+    (!name || isUntitledEnvironmentName(name))
+    && !localVariables.value.some(hasVariableContent)
+  )
+}
+
+async function onAddEnvironment() {
+  await flushPendingUpdate()
+  const name = getNextUntitledName()
+  const id = await createHttpEnvironment({ name })
+  if (id)
+    selectedEnvId.value = id
+}
+
+async function onDeleteEnvironment() {
+  const env = selectedEnv.value
+  if (!env)
+    return
+
+  if (!isEnvironmentEmpty()) {
+    const isConfirmed = await confirm({
+      title: i18n.t('messages:confirm.delete', {
+        name: localName.value.trim() || env.name,
+      }),
+      content: i18n.t('messages:warning.noUndo'),
+    })
+
+    if (!isConfirmed)
+      return
+  }
+
+  await deleteHttpEnvironment(env.id)
+  selectedEnvId.value = environments.value[0]?.id ?? null
+}
+
+function createVariable(): VariableEntry {
+  return { key: '', value: '' }
+}
+
+async function confirmRemoveVariable(variable: VariableEntry) {
+  if (hasVariableContent(variable)) {
+    const key = variable.key.trim()
+    const isConfirmed = await confirm({
+      title: key
+        ? i18n.t('messages:confirm.deleteVariable', { name: key })
+        : i18n.t('messages:confirm.deleteUnnamedVariable'),
+      content: i18n.t('messages:warning.noUndo'),
+    })
+
+    if (!isConfirmed)
+      return false
+  }
+
+  return true
+}
+
+async function onSelectEnvironment(id: number) {
+  if (selectedEnvId.value === id)
+    return
+  await flushPendingUpdate()
+  selectedEnvId.value = id
+}
+</script>
+
+<template>
+  <Dialog.Dialog v-model:open="open">
+    <Dialog.DialogContent
+      class="grid-rows-[auto_minmax(0,1fr)] overflow-hidden sm:max-w-3xl"
+      @open-auto-focus="(e) => e.preventDefault()"
+      @close-auto-focus="(e) => e.preventDefault()"
+    >
+      <Dialog.DialogHeader>
+        <Dialog.DialogTitle>
+          {{ i18n.t("spaces.http.environments.title") }}
+        </Dialog.DialogTitle>
+      </Dialog.DialogHeader>
+      <div
+        class="grid h-[min(560px,calc(100vh-8rem))] min-h-0 grid-cols-[200px_minmax(0,1fr)] gap-4"
+      >
+        <div class="border-border flex flex-col rounded border">
+          <div
+            class="border-border flex items-center justify-between border-b px-2 py-1"
+          >
+            <span class="text-muted-foreground text-xs font-medium">
+              {{ i18n.t("spaces.http.environments.title") }}
+            </span>
+            <UiActionButton
+              :tooltip="i18n.t('spaces.http.action.newEnvironment')"
+              @click="onAddEnvironment"
+            >
+              <Plus class="size-3.5" />
+            </UiActionButton>
+          </div>
+          <div class="scrollbar min-h-0 flex-1 overflow-y-auto p-1">
+            <div
+              v-if="environments.length === 0"
+              class="text-muted-foreground px-2 py-2 text-xs"
+            >
+              {{ i18n.t("spaces.http.environments.empty") }}
+            </div>
+            <button
+              v-for="env in environments"
+              :key="env.id"
+              type="button"
+              class="flex h-[21px] w-full items-center rounded-md px-2 text-left text-sm"
+              :class="
+                selectedEnvId === env.id ? 'bg-accent' : 'hover:bg-accent-hover'
+              "
+              @click="onSelectEnvironment(env.id)"
+            >
+              <span class="truncate">{{ env.name }}</span>
+            </button>
+          </div>
+        </div>
+
+        <div
+          v-if="!selectedEnv"
+          class="text-muted-foreground flex items-center justify-center text-sm"
+        >
+          {{ i18n.t("spaces.http.environments.noEnvironmentSelected") }}
+        </div>
+        <div
+          v-else
+          class="flex min-h-0 min-w-0 flex-col gap-3"
+        >
+          <UiInput
+            v-model="localName"
+            variant="default"
+            :placeholder="i18n.t('spaces.http.environments.namePlaceholder')"
+          />
+          <div
+            class="border-border flex min-h-0 flex-1 flex-col rounded border"
+          >
+            <HttpKeyValueTable
+              v-model="localVariables"
+              :columns="VARIABLE_COLUMNS"
+              :show-enabled="false"
+              actions="delete"
+              grid-template-columns="1fr 1fr 24px"
+              :create-entry="createVariable"
+              :before-remove="confirmRemoveVariable"
+              :empty-text="i18n.t('spaces.http.environments.noVariables')"
+              :add-label="i18n.t('spaces.http.environments.addVariable')"
+            />
+          </div>
+          <div class="flex justify-end">
+            <button
+              type="button"
+              class="text-destructive hover:bg-destructive/10 inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs"
+              @click="onDeleteEnvironment"
+            >
+              <Trash2 class="size-3.5" />
+              {{ i18n.t("spaces.http.action.deleteEnvironment") }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Dialog.DialogContent>
+  </Dialog.Dialog>
+</template>
diff --git a/src/renderer/components/http/EnvironmentsPanel.vue b/src/renderer/components/http/EnvironmentsPanel.vue
new file mode 100644
index 00000000..9eaf8bf3
--- /dev/null
+++ b/src/renderer/components/http/EnvironmentsPanel.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useHttpEnvironments } from '@/composables'
+import { i18n } from '@/electron'
+import { Settings2 } from 'lucide-vue-next'
+
+const { environments, activeEnvironmentId, setActiveHttpEnvironment }
+  = useHttpEnvironments()
+
+const isManagerOpen = ref(false)
+
+async function onSelectEnvironment(id: number | null) {
+  if (activeEnvironmentId.value === id)
+    return
+  await setActiveHttpEnvironment(id)
+}
+
+function openManager() {
+  isManagerOpen.value = true
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <SidebarSectionHeader :title="i18n.t('spaces.http.environments.title')">
+      <template #action>
+        <UiActionButton
+          :tooltip="i18n.t('spaces.http.environments.manage')"
+          @click="openManager"
+        >
+          <Settings2 class="size-4" />
+        </UiActionButton>
+      </template>
+    </SidebarSectionHeader>
+
+    <div class="scrollbar min-h-0 flex-1 overflow-y-auto px-0.5 pb-1">
+      <button
+        type="button"
+        class="flex h-[21px] w-full items-center rounded-md pr-2 pl-6 text-left text-sm"
+        :class="
+          activeEnvironmentId === null ? 'bg-accent' : 'hover:bg-accent-hover'
+        "
+        @click="onSelectEnvironment(null)"
+      >
+        <span class="text-muted-foreground truncate">
+          {{ i18n.t("spaces.http.environments.none") }}
+        </span>
+      </button>
+
+      <div
+        v-if="environments.length === 0"
+        class="text-muted-foreground px-2 py-2 text-xs"
+      >
+        {{ i18n.t("spaces.http.environments.empty") }}
+      </div>
+
+      <button
+        v-for="env in environments"
+        :key="env.id"
+        type="button"
+        class="flex h-[21px] w-full items-center rounded-md pr-2 pl-6 text-left text-sm"
+        :class="
+          activeEnvironmentId === env.id ? 'bg-accent' : 'hover:bg-accent-hover'
+        "
+        @click="onSelectEnvironment(env.id)"
+      >
+        <span class="truncate">{{ env.name }}</span>
+      </button>
+    </div>
+
+    <HttpEnvironmentManagerDialog v-model:open="isManagerOpen" />
+  </div>
+</template>
diff --git a/src/renderer/components/http/HttpMethodBadge.vue b/src/renderer/components/http/HttpMethodBadge.vue
new file mode 100644
index 00000000..b5b3d4ec
--- /dev/null
+++ b/src/renderer/components/http/HttpMethodBadge.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { HttpMethod } from '~/main/types/http'
+import { cn } from '@/utils'
+import { cva } from 'class-variance-authority'
+
+interface Props {
+  method: HttpMethod
+  size?: 'xs' | 'sm'
+  class?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'xs',
+})
+
+const variants = cva('font-mono font-semibold tracking-tight uppercase', {
+  variants: {
+    method: {
+      GET: 'text-emerald-600 dark:text-emerald-400',
+      POST: 'text-amber-600 dark:text-amber-400',
+      PUT: 'text-blue-600 dark:text-blue-400',
+      PATCH: 'text-violet-600 dark:text-violet-400',
+      DELETE: 'text-rose-600 dark:text-rose-400',
+      HEAD: 'text-cyan-600 dark:text-cyan-400',
+      OPTIONS: 'text-zinc-600 dark:text-zinc-400',
+    },
+    size: {
+      xs: 'text-[10px]',
+      sm: 'text-xs',
+    },
+  },
+})
+</script>
+
+<template>
+  <span
+    :data-method="props.method"
+    :class="
+      cn(variants({ method: props.method, size: props.size }), props.class)
+    "
+  >
+    {{ props.method }}
+  </span>
+</template>
diff --git a/src/renderer/components/http/HttpSidebar.vue b/src/renderer/components/http/HttpSidebar.vue
new file mode 100644
index 00000000..3fffd2ab
--- /dev/null
+++ b/src/renderer/components/http/HttpSidebar.vue
@@ -0,0 +1,310 @@
+<script setup lang="ts">
+import type { TreeNode as TreeNodeType } from '@/components/ui/tree/types'
+import * as ContextMenu from '@/components/ui/shadcn/context-menu'
+import { Tree as UiTree } from '@/components/ui/tree'
+import {
+  useHttpApp,
+  useHttpFolderDragDrop,
+  useHttpFolders,
+  useHttpRequests,
+  useHttpSearch,
+  useResizeHandle,
+} from '@/composables'
+import { i18n, store } from '@/electron'
+import {
+  getEntryNameConflictMessage,
+  getEntryNameValidationMessage,
+} from '@/utils'
+import { Folder, Plus } from 'lucide-vue-next'
+import { LAYOUT_DEFAULTS } from '~/main/store/constants'
+
+const ENVIRONMENTS_PANEL_DEFAULTS
+  = LAYOUT_DEFAULTS.http.environmentsPanel ?? LAYOUT_DEFAULTS.tags
+
+const {
+  highlightedFolderIds,
+  highlightedRequestIds,
+  focusedFolderId,
+  httpState,
+} = useHttpApp()
+const {
+  createHttpFolderAndSelect,
+  folders,
+  updateHttpFolder,
+  getFolderByIdFromTree,
+  selectedFolderIds,
+  selectHttpFolder,
+} = useHttpFolders()
+const { getHttpRequests, isRestoreStateBlocked, selectFirstRequest }
+  = useHttpRequests()
+const { clearSearch } = useHttpSearch()
+const { onDragNode, onExternalDrop } = useHttpFolderDragDrop()
+
+const environmentsHandleRef = ref<HTMLElement>()
+
+function normalizeEnvironmentsHeight(value: number | undefined) {
+  if (
+    typeof value !== 'number'
+    || Number.isNaN(value)
+    || value < ENVIRONMENTS_PANEL_DEFAULTS.min
+  ) {
+    return ENVIRONMENTS_PANEL_DEFAULTS.height
+  }
+  return value
+}
+
+const environmentsHeight = ref(
+  normalizeEnvironmentsHeight(
+    store.app.get('http.layout.environmentsListHeight') as number | undefined,
+  ),
+)
+
+useResizeHandle(environmentsHandleRef, {
+  direction: 'vertical',
+  onMove(dy) {
+    environmentsHeight.value = Math.max(
+      ENVIRONMENTS_PANEL_DEFAULTS.min,
+      environmentsHeight.value - dy,
+    )
+  },
+  onEnd() {
+    store.app.set(
+      'http.layout.environmentsListHeight',
+      environmentsHeight.value,
+    )
+  },
+})
+
+function mapToTreeNode(folder: any): TreeNodeType {
+  return {
+    id: folder.id,
+    label: folder.name,
+    isExpanded: Boolean(folder.isOpen),
+    children: folder.children?.map(mapToTreeNode) || [],
+  }
+}
+
+const treeData = computed(() => folders.value?.map(mapToTreeNode) || [])
+
+const selectedIds = computed({
+  get: () => selectedFolderIds.value as (string | number)[],
+  set: (val) => {
+    selectedFolderIds.value = val as number[]
+  },
+})
+
+const editableId = ref<string | number | null>(null)
+
+const focusedId = computed({
+  get: () => focusedFolderId.value as string | number | undefined,
+  set: (val) => {
+    focusedFolderId.value = val as number | undefined
+  },
+})
+
+const highlightedIds = computed({
+  get: () => highlightedFolderIds.value as Set<string | number>,
+  set: (val) => {
+    highlightedFolderIds.value.clear()
+    val.forEach(id => highlightedFolderIds.value.add(id as number))
+  },
+})
+
+const contextNode = ref<any>(null)
+
+function flattenFolders(nodes: any[], acc: any[] = []): any[] {
+  for (const folder of nodes) {
+    acc.push(folder)
+    if (folder.children?.length) {
+      flattenFolders(folder.children, acc)
+    }
+  }
+  return acc
+}
+
+function hasSiblingFolderConflict(node: TreeNodeType, value: string): boolean {
+  const folderId = Number(node.id)
+  const folder = getFolderByIdFromTree(folders.value, folderId)
+  if (!folder)
+    return false
+
+  const normalized = value.trim().toLowerCase()
+  if (!normalized || normalized === folder.name.toLowerCase())
+    return false
+
+  const parentId = folder.parentId ?? null
+  return flattenFolders(folders.value || []).some(
+    sibling =>
+      sibling.id !== folderId
+      && (sibling.parentId ?? null) === parentId
+      && sibling.name.toLowerCase() === normalized,
+  )
+}
+
+function getFolderValidationMessage(node: TreeNodeType, value: string) {
+  const message = getEntryNameValidationMessage(value, i18n.t.bind(i18n))
+  if (message)
+    return message
+
+  if (hasSiblingFolderConflict(node, value)) {
+    return getEntryNameConflictMessage('folder', i18n.t.bind(i18n))
+  }
+
+  return ''
+}
+
+async function onClickNode({
+  node,
+  event,
+}: {
+  node: TreeNodeType
+  event?: MouseEvent
+}) {
+  highlightedFolderIds.value.clear()
+
+  const id = Number(node.id)
+
+  if (event?.shiftKey) {
+    await selectHttpFolder(id, { mode: 'range', ensureVisibility: false })
+    return
+  }
+
+  if (event && (event.metaKey || event.ctrlKey)) {
+    await selectHttpFolder(id, { mode: 'toggle', ensureVisibility: false })
+    return
+  }
+
+  if (httpState.folderId === id && selectedFolderIds.value.length === 1)
+    return
+
+  isRestoreStateBlocked.value = true
+  clearSearch()
+
+  await selectHttpFolder(id)
+  await getHttpRequests()
+  selectFirstRequest({ folderId: id })
+}
+
+function onDblclickNode(node: TreeNodeType) {
+  setTimeout(() => {
+    editableId.value = node.id
+  }, 100)
+}
+
+function onToggleNode(node: TreeNodeType) {
+  const folderNode = getFolderByIdFromTree(folders.value, Number(node.id))
+  if (folderNode) {
+    updateHttpFolder(Number(node.id), {
+      isOpen: !folderNode.isOpen ? 1 : 0,
+    })
+  }
+}
+
+function onContextMenu({
+  node,
+}: {
+  node: TreeNodeType
+  selectedNodes: TreeNodeType[]
+}) {
+  contextNode.value = getFolderByIdFromTree(folders.value, Number(node.id))
+  highlightedRequestIds.value.clear()
+}
+
+function onUpdateLabel({ node, value }: { node: TreeNodeType, value: string }) {
+  updateHttpFolder(Number(node.id), { name: value })
+  editableId.value = null
+}
+
+function onCancelEdit() {
+  editableId.value = null
+}
+</script>
+
+<template>
+  <div
+    class="flex h-full flex-col px-1"
+    style="
+      padding-top: calc(var(--content-top-offset) + var(--header-gap, 0px));
+    "
+  >
+    <SidebarHeader
+      :title="i18n.t('spaces.http.title')"
+      :section-title="i18n.t('common.folders')"
+    >
+      <template #action>
+        <UiActionButton
+          :tooltip="i18n.t('action.new.folder')"
+          @click="createHttpFolderAndSelect()"
+        >
+          <Plus class="h-4 w-4" />
+        </UiActionButton>
+      </template>
+    </SidebarHeader>
+    <div class="flex min-h-0 flex-1 flex-col">
+      <div class="scrollbar min-h-0 flex-1 overflow-y-auto">
+        <ContextMenu.ContextMenu>
+          <ContextMenu.ContextMenuTrigger as-child>
+            <UiTree
+              v-if="treeData.length"
+              :model-value="treeData"
+              :selected-ids="selectedIds"
+              :editable-id="editableId"
+              :focused-id="focusedId"
+              :highlighted-ids="highlightedIds"
+              :get-validation-message="getFolderValidationMessage"
+              class="h-full px-0.5 pb-1"
+              @click-node="onClickNode"
+              @dblclick-node="onDblclickNode"
+              @toggle-node="onToggleNode"
+              @drag-node="onDragNode"
+              @external-drop="onExternalDrop"
+              @context-menu="onContextMenu"
+              @update-label="onUpdateLabel"
+              @cancel-edit="onCancelEdit"
+              @update:selected-ids="selectedIds = $event"
+              @update:editable-id="editableId = $event"
+              @update:focused-id="focusedId = $event"
+              @update:highlighted-ids="highlightedIds = $event"
+            >
+              <template #icon="{ node }">
+                <div class="mr-1.5 flex flex-shrink-0 items-center">
+                  <UiFolderIcon
+                    v-if="getFolderByIdFromTree(folders, Number(node.id))?.icon"
+                    :name="
+                      getFolderByIdFromTree(folders, Number(node.id))!.icon!
+                    "
+                  />
+                  <Folder
+                    v-else
+                    class="h-4 w-4"
+                  />
+                </div>
+              </template>
+            </UiTree>
+          </ContextMenu.ContextMenuTrigger>
+          <UiEmptyPlaceholder
+            v-if="!treeData.length"
+            :text="i18n.t('placeholder.emptyFoldersList')"
+          />
+          <HttpSidebarFolderContextMenu
+            :context-node="contextNode"
+            :editable-id="editableId"
+            @update:editable-id="editableId = $event"
+          />
+        </ContextMenu.ContextMenu>
+      </div>
+
+      <div
+        ref="environmentsHandleRef"
+        class="before:bg-border hover:before:bg-primary data-[resizing]:before:bg-primary relative z-10 flex h-px shrink-0 cursor-row-resize items-center justify-center bg-transparent before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:transition-[background-color,height] before:duration-150 before:content-[''] after:absolute after:inset-x-0 after:top-1/2 after:h-3 after:-translate-y-1/2 after:content-[''] hover:before:h-0.5 hover:before:delay-200 data-[resizing]:before:h-0.5"
+      />
+
+      <div
+        :style="{ height: `${environmentsHeight}px` }"
+        class="shrink-0 overflow-hidden"
+      >
+        <HttpEnvironmentsPanel />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/HttpSidebarFolderContextMenu.vue b/src/renderer/components/http/HttpSidebarFolderContextMenu.vue
new file mode 100644
index 00000000..93862e4a
--- /dev/null
+++ b/src/renderer/components/http/HttpSidebarFolderContextMenu.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import CustomIcons from '@/components/sidebar/folders/custom-icons/CustomIcons.vue'
+import * as ContextMenu from '@/components/ui/shadcn/context-menu'
+import { useDialog, useHttpFolders, useHttpRequests } from '@/composables'
+import { i18n } from '@/electron'
+import { scrollToElement } from '@/utils'
+
+const props = defineProps<{
+  contextNode: any
+  editableId: string | number | null
+}>()
+
+const emit = defineEmits<{
+  'update:editableId': [value: string | number | null]
+}>()
+
+const {
+  createHttpFolderAndSelect,
+  deleteHttpFolder,
+  folders,
+  getFolderByIdFromTree,
+  getHttpFolders,
+  updateHttpFolder,
+  selectedFolderIds,
+  clearFolderSelection,
+  selectHttpFolder,
+} = useHttpFolders()
+const { createHttpRequestAndSelect } = useHttpRequests()
+
+const isContextMultiSelection = computed(() => {
+  if (!props.contextNode)
+    return false
+  if (selectedFolderIds.value.length <= 1)
+    return false
+  return selectedFolderIds.value.includes(props.contextNode.id)
+})
+
+async function onCreateChildRequest() {
+  if (!props.contextNode)
+    return
+  await createHttpRequestAndSelect({ folderId: props.contextNode.id })
+}
+
+async function onDeleteFolder() {
+  if (!props.contextNode)
+    return
+
+  const { confirm } = useDialog()
+  const targetIds = selectedFolderIds.value.includes(props.contextNode.id)
+    ? [...selectedFolderIds.value]
+    : [props.contextNode.id]
+  const folderName = getFolderByIdFromTree(
+    folders.value,
+    props.contextNode.id,
+  )?.name
+
+  const isConfirmed = await confirm({
+    title:
+      targetIds.length > 1
+        ? i18n.t('messages:confirm.delete', {
+            name: i18n.t('common.folders'),
+          })
+        : i18n.t('messages:confirm.delete', { name: folderName }),
+  })
+
+  if (!isConfirmed)
+    return
+
+  await Promise.all(targetIds.map(id => deleteHttpFolder(id, false)))
+  await getHttpFolders(false)
+
+  const fallbackId = selectedFolderIds.value[0]
+  if (fallbackId) {
+    await selectHttpFolder(fallbackId)
+    scrollToElement(`[id="${fallbackId}"]`)
+  }
+  else {
+    clearFolderSelection()
+  }
+}
+
+function onRenameFolder() {
+  setTimeout(() => {
+    if (!props.contextNode)
+      return
+    emit('update:editableId', props.contextNode.id)
+  }, 100)
+}
+
+function onSetCustomIcon() {
+  if (!props.contextNode)
+    return
+
+  const { showDialog } = useDialog()
+  showDialog({
+    title: i18n.t('action.setCustomIcon'),
+    content: h(CustomIcons, {
+      nodeId: props.contextNode.id,
+      onSetIcon: async (nodeId: number, iconName: string) => {
+        await updateHttpFolder(nodeId, { icon: iconName })
+        await getHttpFolders(false)
+      },
+    }),
+  })
+}
+
+async function onRemoveCustomIcon() {
+  if (!props.contextNode)
+    return
+
+  await updateHttpFolder(props.contextNode.id, { icon: null })
+  await getHttpFolders(false)
+}
+</script>
+
+<template>
+  <ContextMenu.ContextMenuContent>
+    <template v-if="isContextMultiSelection">
+      <ContextMenu.ContextMenuItem @click="onDeleteFolder">
+        {{ i18n.t("action.delete.common") }}
+      </ContextMenu.ContextMenuItem>
+    </template>
+    <template v-else>
+      <ContextMenu.ContextMenuItem @click="onCreateChildRequest">
+        {{ i18n.t("spaces.http.action.newRequest") }}
+      </ContextMenu.ContextMenuItem>
+      <ContextMenu.ContextMenuItem
+        @click="createHttpFolderAndSelect(contextNode?.id)"
+      >
+        {{ i18n.t("action.new.folder") }}
+      </ContextMenu.ContextMenuItem>
+      <ContextMenu.ContextMenuSeparator />
+      <ContextMenu.ContextMenuItem @click="onRenameFolder">
+        {{ i18n.t("action.rename") }}
+      </ContextMenu.ContextMenuItem>
+      <ContextMenu.ContextMenuItem @click="onDeleteFolder">
+        {{ i18n.t("action.delete.common") }}
+      </ContextMenu.ContextMenuItem>
+      <ContextMenu.ContextMenuSeparator />
+      <ContextMenu.ContextMenuItem @click="onSetCustomIcon">
+        {{ i18n.t("action.setCustomIcon") }}
+      </ContextMenu.ContextMenuItem>
+      <ContextMenu.ContextMenuItem
+        v-if="contextNode?.icon"
+        @click="onRemoveCustomIcon"
+      >
+        {{ i18n.t("action.removeCustomIcon") }}
+      </ContextMenu.ContextMenuItem>
+    </template>
+  </ContextMenu.ContextMenuContent>
+</template>
diff --git a/src/renderer/components/http/KeyValueTable.vue b/src/renderer/components/http/KeyValueTable.vue
new file mode 100644
index 00000000..0252e406
--- /dev/null
+++ b/src/renderer/components/http/KeyValueTable.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { Checkbox } from '@/components/ui/shadcn/checkbox'
+import * as Popover from '@/components/ui/shadcn/popover'
+import { i18n } from '@/electron'
+import { Copy, MoreHorizontal, Plus, Trash2 } from 'lucide-vue-next'
+
+interface Entry {
+  key: string
+  value: string
+  description?: string
+  enabled?: boolean
+  type?: string
+  [key: string]: any
+}
+
+interface Column {
+  key: string
+  label: string
+  placeholder?: string
+  width?: string
+}
+
+type RowActionMode = 'delete' | 'menu' | 'none'
+
+const props = withDefaults(
+  defineProps<{
+    columns?: Column[]
+    showEnabled?: boolean
+    actions?: RowActionMode
+    duplicateRows?: boolean
+    emptyText?: string
+    addLabel?: string
+    gridTemplateColumns?: string
+    createEntry?: () => Entry
+    beforeRemove?: (entry: Entry, index: number) => boolean | Promise<boolean>
+  }>(),
+  {
+    columns: () => [
+      {
+        key: 'key',
+        label: i18n.t('spaces.http.editor.keyValue.key'),
+        placeholder: i18n.t('spaces.http.editor.keyValue.key'),
+      },
+      {
+        key: 'value',
+        label: i18n.t('spaces.http.editor.keyValue.value'),
+        placeholder: i18n.t('spaces.http.editor.keyValue.value'),
+      },
+      {
+        key: 'description',
+        label: i18n.t('spaces.http.editor.keyValue.description'),
+        placeholder: i18n.t('spaces.http.editor.keyValue.description'),
+      },
+    ],
+    showEnabled: true,
+    actions: 'menu',
+    duplicateRows: true,
+    emptyText: '',
+    addLabel: () => i18n.t('spaces.http.editor.keyValue.addRow'),
+    gridTemplateColumns: '',
+    createEntry: () => ({
+      key: '',
+      value: '',
+      description: '',
+      enabled: true,
+    }),
+    beforeRemove: undefined,
+  },
+)
+
+const model = defineModel<Entry[]>({ required: true })
+
+const resolvedGridTemplateColumns = computed(() => {
+  if (props.gridTemplateColumns)
+    return props.gridTemplateColumns
+
+  const parts = [
+    props.showEnabled ? '20px' : '',
+    ...props.columns.map(column => column.width ?? '1fr'),
+    props.actions !== 'none' ? '24px' : '',
+  ].filter(Boolean)
+
+  return parts.join(' ')
+})
+
+function isEnabled(entry: Entry): boolean {
+  return entry.enabled !== false
+}
+
+function setEnabled(index: number, value: boolean) {
+  const entry = model.value[index]
+  if (!entry)
+    return
+  model.value.splice(index, 1, { ...entry, enabled: value })
+}
+
+function addRow() {
+  model.value.push(props.createEntry())
+}
+
+async function removeRow(index: number) {
+  const entry = model.value[index]
+  if (!entry)
+    return
+
+  if (props.beforeRemove) {
+    const shouldRemove = await props.beforeRemove(entry, index)
+    if (!shouldRemove)
+      return
+  }
+
+  model.value.splice(index, 1)
+}
+
+function duplicateRow(index: number) {
+  const entry = model.value[index]
+  if (!entry)
+    return
+  model.value.splice(index + 1, 0, { ...entry })
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      class="text-muted-foreground border-border grid items-center gap-2 border-b px-2 py-1 text-[10px] font-semibold tracking-wider uppercase"
+      :style="{ gridTemplateColumns: resolvedGridTemplateColumns }"
+    >
+      <span v-if="showEnabled" />
+      <span
+        v-for="column in columns"
+        :key="column.key"
+      >
+        {{ column.label }}
+      </span>
+      <span v-if="actions !== 'none'" />
+    </div>
+
+    <div class="scrollbar min-h-0 flex-1 overflow-y-auto">
+      <div
+        v-if="model.length === 0 && emptyText"
+        class="text-muted-foreground px-2 py-2 text-xs"
+      >
+        {{ emptyText }}
+      </div>
+      <div
+        v-for="(entry, index) in model"
+        :key="index"
+        class="border-border hover:bg-accent-hover grid min-h-7 items-center gap-2 border-b px-2 py-0.5"
+        :class="{ 'opacity-50': showEnabled && !isEnabled(entry) }"
+        :style="{ gridTemplateColumns: resolvedGridTemplateColumns }"
+      >
+        <Checkbox
+          v-if="showEnabled"
+          :model-value="isEnabled(entry)"
+          @update:model-value="(v) => setEnabled(index, !!v)"
+        />
+
+        <template
+          v-for="column in columns"
+          :key="column.key"
+        >
+          <slot
+            :name="`cell-${column.key}`"
+            :entry="entry"
+            :index="index"
+            :column="column"
+          >
+            <UiInput
+              v-model="entry[column.key]"
+              class="!h-6"
+              variant="ghost"
+              :placeholder="column.placeholder ?? column.label"
+            />
+          </slot>
+        </template>
+
+        <Popover.Popover v-if="actions === 'menu'">
+          <Popover.PopoverTrigger as-child>
+            <button
+              type="button"
+              class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-6 items-center justify-center rounded"
+            >
+              <MoreHorizontal class="h-3.5 w-3.5" />
+            </button>
+          </Popover.PopoverTrigger>
+          <Popover.PopoverContent
+            align="end"
+            class="w-40 p-1"
+          >
+            <button
+              v-if="duplicateRows"
+              type="button"
+              class="hover:bg-accent flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm"
+              @click="duplicateRow(index)"
+            >
+              <Copy class="h-3.5 w-3.5" />
+              {{ i18n.t("action.duplicate") }}
+            </button>
+            <button
+              type="button"
+              class="hover:bg-accent flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm"
+              @click="removeRow(index)"
+            >
+              <Trash2 class="h-3.5 w-3.5" />
+              {{ i18n.t("action.delete.common") }}
+            </button>
+          </Popover.PopoverContent>
+        </Popover.Popover>
+
+        <slot
+          v-else-if="actions === 'delete'"
+          name="delete-action"
+          :entry="entry"
+          :index="index"
+          :remove-row="() => removeRow(index)"
+        >
+          <button
+            type="button"
+            class="text-muted-foreground hover:text-foreground hover:bg-accent inline-flex size-6 items-center justify-center rounded"
+            @click="removeRow(index)"
+          >
+            <Trash2 class="size-3.5" />
+          </button>
+        </slot>
+      </div>
+    </div>
+
+    <button
+      type="button"
+      class="text-muted-foreground hover:text-foreground mt-1 inline-flex h-7 w-fit items-center gap-1 rounded px-2 text-xs"
+      @click="addRow"
+    >
+      <Plus class="h-3.5 w-3.5" />
+      {{ addLabel }}
+    </button>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestAuthTab.vue b/src/renderer/components/http/RequestAuthTab.vue
new file mode 100644
index 00000000..83f54271
--- /dev/null
+++ b/src/renderer/components/http/RequestAuthTab.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { HttpRequestDraft } from '@/composables'
+import type { HttpAuthType } from '~/main/types/http'
+import { Input } from '@/components/ui/shadcn/input'
+import * as Select from '@/components/ui/shadcn/select'
+import { i18n } from '@/electron'
+
+const draft = defineModel<HttpRequestDraft>({ required: true })
+
+const AUTH_TYPES: { value: HttpAuthType, labelKey: string }[] = [
+  { value: 'none', labelKey: 'spaces.http.editor.auth.typeNone' },
+  { value: 'bearer', labelKey: 'spaces.http.editor.auth.typeBearer' },
+  { value: 'basic', labelKey: 'spaces.http.editor.auth.typeBasic' },
+]
+
+const authType = computed({
+  get: () => draft.value.auth.type,
+  set: (value) => {
+    draft.value.auth = { ...draft.value.auth, type: value }
+  },
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-3">
+    <div class="flex items-center">
+      <Select.Select v-model="authType">
+        <Select.SelectTrigger class="w-48">
+          <Select.SelectValue />
+        </Select.SelectTrigger>
+        <Select.SelectContent>
+          <Select.SelectItem
+            v-for="t in AUTH_TYPES"
+            :key="t.value"
+            :value="t.value"
+          >
+            {{ i18n.t(t.labelKey) }}
+          </Select.SelectItem>
+        </Select.SelectContent>
+      </Select.Select>
+    </div>
+
+    <div
+      v-if="authType === 'bearer'"
+      class="flex flex-col gap-1"
+    >
+      <UiText class="text-muted-foreground text-xs">
+        {{ i18n.t("spaces.http.editor.auth.token") }}
+      </UiText>
+      <Input
+        v-model="draft.auth.token"
+        class="font-mono"
+        :placeholder="i18n.t('spaces.http.editor.auth.tokenPlaceholder')"
+      />
+    </div>
+
+    <div
+      v-else-if="authType === 'basic'"
+      class="flex flex-col gap-3"
+    >
+      <div class="flex flex-col gap-1">
+        <UiText class="text-muted-foreground text-xs">
+          {{ i18n.t("spaces.http.editor.auth.username") }}
+        </UiText>
+        <Input
+          v-model="draft.auth.username"
+          class="font-mono"
+          :placeholder="i18n.t('spaces.http.editor.auth.usernamePlaceholder')"
+        />
+      </div>
+      <div class="flex flex-col gap-1">
+        <UiText class="text-muted-foreground text-xs">
+          {{ i18n.t("spaces.http.editor.auth.password") }}
+        </UiText>
+        <Input
+          v-model="draft.auth.password"
+          type="password"
+          class="font-mono"
+          :placeholder="i18n.t('spaces.http.editor.auth.passwordPlaceholder')"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestBodyTab.vue b/src/renderer/components/http/RequestBodyTab.vue
new file mode 100644
index 00000000..146bdef0
--- /dev/null
+++ b/src/renderer/components/http/RequestBodyTab.vue
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import type { HttpRequestDraft } from '@/composables'
+import type { HttpBodyType } from '~/main/types/http'
+import * as Select from '@/components/ui/shadcn/select'
+import { useHttpSettings } from '@/composables'
+import { i18n } from '@/electron'
+
+const draft = defineModel<HttpRequestDraft>({ required: true })
+const { settings } = useHttpSettings()
+
+const BODY_TYPES: { value: HttpBodyType, labelKey: string }[] = [
+  { value: 'none', labelKey: 'spaces.http.editor.body.typeNone' },
+  { value: 'json', labelKey: 'spaces.http.editor.body.typeJson' },
+  { value: 'text', labelKey: 'spaces.http.editor.body.typeText' },
+  {
+    value: 'form-urlencoded',
+    labelKey: 'spaces.http.editor.body.typeFormUrlencoded',
+  },
+  { value: 'multipart', labelKey: 'spaces.http.editor.body.typeMultipart' },
+]
+
+const FORM_DATA_COLUMNS = [
+  {
+    key: 'key',
+    label: i18n.t('spaces.http.editor.keyValue.key'),
+    placeholder: i18n.t('spaces.http.editor.keyValue.key'),
+  },
+  {
+    key: 'type',
+    label: i18n.t('spaces.http.editor.body.fieldType.text'),
+    width: '120px',
+  },
+  {
+    key: 'value',
+    label: i18n.t('spaces.http.editor.keyValue.value'),
+    placeholder: i18n.t('spaces.http.editor.keyValue.value'),
+  },
+]
+
+const bodyType = computed({
+  get: () => draft.value.bodyType,
+  set: (value) => {
+    draft.value.bodyType = value
+  },
+})
+
+const bodyText = computed({
+  get: () => draft.value.body ?? '',
+  set: (value) => {
+    draft.value.body = value
+  },
+})
+
+function addFormDataRow() {
+  return { key: '', type: 'text', value: '' }
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col gap-2">
+    <div class="flex items-center">
+      <Select.Select v-model="bodyType">
+        <Select.SelectTrigger class="w-48">
+          <Select.SelectValue />
+        </Select.SelectTrigger>
+        <Select.SelectContent>
+          <Select.SelectItem
+            v-for="t in BODY_TYPES"
+            :key="t.value"
+            :value="t.value"
+          >
+            {{ i18n.t(t.labelKey) }}
+          </Select.SelectItem>
+        </Select.SelectContent>
+      </Select.Select>
+    </div>
+
+    <HttpBodyEditor
+      v-if="
+        bodyType === 'json'
+          || bodyType === 'text'
+          || bodyType === 'form-urlencoded'
+      "
+      v-model="bodyText"
+      :language="bodyType"
+      :wrap-lines="settings.wrapLines"
+      :placeholder="i18n.t('spaces.http.editor.body.placeholder')"
+      class="min-h-0 flex-1"
+    />
+
+    <div
+      v-else-if="bodyType === 'multipart'"
+      class="min-h-0 flex-1"
+    >
+      <HttpKeyValueTable
+        v-model="draft.formData"
+        :columns="FORM_DATA_COLUMNS"
+        :show-enabled="false"
+        actions="delete"
+        grid-template-columns="1fr 120px 1fr 24px"
+        :create-entry="addFormDataRow"
+      >
+        <template #cell-type="{ entry }">
+          <Select.Select v-model="entry.type">
+            <Select.SelectTrigger class="!h-6 w-full">
+              <Select.SelectValue />
+            </Select.SelectTrigger>
+            <Select.SelectContent>
+              <Select.SelectItem value="text">
+                {{ i18n.t("spaces.http.editor.body.fieldType.text") }}
+              </Select.SelectItem>
+              <Select.SelectItem value="file">
+                {{ i18n.t("spaces.http.editor.body.fieldType.file") }}
+              </Select.SelectItem>
+            </Select.SelectContent>
+          </Select.Select>
+        </template>
+        <template #cell-value="{ entry, column }">
+          <UiInput
+            v-model="entry.value"
+            class="!h-6"
+            variant="ghost"
+            :placeholder="
+              entry.type === 'file'
+                ? i18n.t('spaces.http.editor.body.filePlaceholder')
+                : column.placeholder
+            "
+          />
+        </template>
+      </HttpKeyValueTable>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestDescriptionTab.vue b/src/renderer/components/http/RequestDescriptionTab.vue
new file mode 100644
index 00000000..5fe99b6d
--- /dev/null
+++ b/src/renderer/components/http/RequestDescriptionTab.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HttpRequestDraft } from '@/composables'
+import { Textarea } from '@/components/ui/shadcn/textarea'
+import { i18n } from '@/electron'
+
+const draft = defineModel<HttpRequestDraft>({ required: true })
+</script>
+
+<template>
+  <Textarea
+    v-model="draft.description"
+    class="min-h-40"
+    :placeholder="i18n.t('spaces.http.editor.description.placeholder')"
+  />
+</template>
diff --git a/src/renderer/components/http/RequestEditor.vue b/src/renderer/components/http/RequestEditor.vue
new file mode 100644
index 00000000..895e9ace
--- /dev/null
+++ b/src/renderer/components/http/RequestEditor.vue
@@ -0,0 +1,290 @@
+<script setup lang="ts">
+import type { HttpMethod } from '~/main/types/http'
+import * as Select from '@/components/ui/shadcn/select'
+import * as Tabs from '@/components/ui/shadcn/tabs'
+import {
+  useHttpExecute,
+  useHttpRequests,
+  useNavigationHistory,
+} from '@/composables'
+import { i18n } from '@/electron'
+import { navigateBack, navigateForward } from '@/ipc/listeners/deepLinks'
+import {
+  getEntryNameConflictMessage,
+  getEntryNameValidationMessage,
+} from '@/utils'
+import { ChevronLeft, ChevronRight, LoaderCircle, Send } from 'lucide-vue-next'
+import { getEntryNameValidationIssue } from '~/shared/entryNameValidation'
+
+const HTTP_METHODS: HttpMethod[] = [
+  'GET',
+  'POST',
+  'PUT',
+  'PATCH',
+  'DELETE',
+  'HEAD',
+  'OPTIONS',
+]
+
+const {
+  currentDraft,
+  currentRequest,
+  hasSiblingRequestNameConflict,
+  saveCurrentRequest,
+} = useHttpRequests()
+const { executeCurrentRequest, isExecuting } = useHttpExecute()
+const { canGoBack, canGoForward } = useNavigationHistory()
+
+const activeTab = ref<'params' | 'headers' | 'body' | 'auth' | 'description'>(
+  'params',
+)
+
+const paramsCount = computed(() => currentDraft.value?.query.length ?? 0)
+const headersCount = computed(() => currentDraft.value?.headers.length ?? 0)
+const authIndicator = computed(() => {
+  const type = currentDraft.value?.auth.type
+  if (!type || type === 'none')
+    return null
+  return type
+})
+
+const isNameFocused = ref(false)
+
+const hasNameConflict = computed(() => {
+  if (!currentDraft.value || !currentRequest.value)
+    return false
+  if (getEntryNameValidationIssue(currentDraft.value.name))
+    return false
+  if (
+    currentDraft.value.name.trim().toLowerCase()
+    === currentRequest.value.name.toLowerCase()
+  ) {
+    return false
+  }
+  return hasSiblingRequestNameConflict(
+    currentDraft.value.name,
+    currentRequest.value.id,
+    currentDraft.value.folderId,
+  )
+})
+
+const nameValidationMessage = computed(() => {
+  if (!currentDraft.value)
+    return ''
+  const issueMessage = getEntryNameValidationMessage(
+    currentDraft.value.name,
+    i18n.t.bind(i18n),
+  )
+  if (issueMessage)
+    return issueMessage
+  if (hasNameConflict.value)
+    return getEntryNameConflictMessage('request', i18n.t.bind(i18n))
+  return ''
+})
+
+const isNameValidationTooltipOpen = computed(
+  () => isNameFocused.value && Boolean(nameValidationMessage.value),
+)
+const isHistoryVisible = computed(() => canGoBack.value || canGoForward.value)
+
+function onBackClick() {
+  void navigateBack()
+}
+
+function onForwardClick() {
+  void navigateForward()
+}
+
+function onNameFocus() {
+  isNameFocused.value = true
+}
+
+function onNameBlur() {
+  if (
+    currentDraft.value
+    && currentRequest.value
+    && (getEntryNameValidationIssue(currentDraft.value.name)
+      || hasNameConflict.value)
+  ) {
+    currentDraft.value.name = currentRequest.value.name
+  }
+  isNameFocused.value = false
+}
+
+async function onSend() {
+  await saveCurrentRequest()
+  await executeCurrentRequest()
+}
+</script>
+
+<template>
+  <div
+    v-if="!currentRequest"
+    class="text-muted-foreground flex h-full items-center justify-center"
+  >
+    {{ i18n.t("spaces.http.editor.noSelected") }}
+  </div>
+  <div
+    v-else-if="currentDraft"
+    class="flex h-full flex-col"
+  >
+    <div
+      class="border-border grid grid-cols-[1fr_auto] items-center border-b px-2 pb-1"
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-1 overflow-hidden">
+        <div
+          v-if="isHistoryVisible"
+          class="flex shrink-0 items-center gap-0.5"
+        >
+          <UiActionButton
+            :disabled="!canGoBack"
+            :tooltip="i18n.t('menu:history.back')"
+            @click="onBackClick"
+          >
+            <ChevronLeft class="h-3 w-3" />
+          </UiActionButton>
+          <UiActionButton
+            :disabled="!canGoForward"
+            :tooltip="i18n.t('menu:history.forward')"
+            @click="onForwardClick"
+          >
+            <ChevronRight class="h-3 w-3" />
+          </UiActionButton>
+        </div>
+        <div class="min-w-0 flex-1">
+          <UiInputValidationTooltip
+            :open="isNameValidationTooltipOpen"
+            :message="nameValidationMessage"
+          >
+            <UiInput
+              v-model="currentDraft.name"
+              variant="ghost"
+              class="w-full truncate px-0"
+              :placeholder="i18n.t('spaces.http.editor.namePlaceholder')"
+              @focus="onNameFocus"
+              @blur="onNameBlur"
+            />
+          </UiInputValidationTooltip>
+        </div>
+      </div>
+      <div class="flex h-7 items-center" />
+    </div>
+    <div class="border-border flex items-center gap-1 border-b px-2 py-1">
+      <Select.Select v-model="currentDraft.method">
+        <Select.SelectTrigger class="w-24">
+          <Select.SelectValue>
+            <HttpMethodBadge
+              :method="currentDraft.method"
+              size="sm"
+            />
+          </Select.SelectValue>
+        </Select.SelectTrigger>
+        <Select.SelectContent>
+          <Select.SelectItem
+            v-for="m in HTTP_METHODS"
+            :key="m"
+            :value="m"
+          >
+            <HttpMethodBadge
+              :method="m"
+              size="sm"
+            />
+          </Select.SelectItem>
+        </Select.SelectContent>
+      </Select.Select>
+      <div class="min-w-0 flex-1">
+        <HttpVariableInput
+          v-model="currentDraft.url"
+          :placeholder="i18n.t('spaces.http.editor.urlPlaceholder')"
+        />
+      </div>
+      <UiActionButton
+        :aria-label="i18n.t('spaces.http.editor.send')"
+        :disabled="isExecuting || !currentDraft.url"
+        @click="onSend"
+      >
+        <LoaderCircle
+          v-if="isExecuting"
+          class="animate-spin"
+        />
+        <Send v-else />
+      </UiActionButton>
+    </div>
+    <Tabs.Tabs
+      v-model="activeTab"
+      class="flex min-h-0 flex-1 flex-col gap-0"
+    >
+      <div
+        class="border-border flex items-center justify-between border-b px-2 py-1"
+      >
+        <Tabs.TabsList>
+          <Tabs.TabsTrigger value="params">
+            {{ i18n.t("spaces.http.editor.tabs.params") }}
+            <span
+              v-if="paramsCount"
+              class="bg-muted text-muted-foreground ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded px-1 text-[10px] font-medium tabular-nums"
+            >
+              {{ paramsCount }}
+            </span>
+          </Tabs.TabsTrigger>
+          <Tabs.TabsTrigger value="headers">
+            {{ i18n.t("spaces.http.editor.tabs.headers") }}
+            <span
+              v-if="headersCount"
+              class="bg-muted text-muted-foreground ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded px-1 text-[10px] font-medium tabular-nums"
+            >
+              {{ headersCount }}
+            </span>
+          </Tabs.TabsTrigger>
+          <Tabs.TabsTrigger value="body">
+            {{ i18n.t("spaces.http.editor.tabs.body") }}
+          </Tabs.TabsTrigger>
+          <Tabs.TabsTrigger value="auth">
+            {{ i18n.t("spaces.http.editor.tabs.auth") }}
+            <span
+              v-if="authIndicator"
+              class="bg-muted text-muted-foreground ml-1 inline-flex h-4 items-center justify-center rounded px-1.5 text-[10px] font-medium"
+            >
+              {{ authIndicator }}
+            </span>
+          </Tabs.TabsTrigger>
+          <Tabs.TabsTrigger value="description">
+            {{ i18n.t("spaces.http.editor.tabs.description") }}
+          </Tabs.TabsTrigger>
+        </Tabs.TabsList>
+      </div>
+      <div class="scrollbar min-h-0 flex-1 overflow-y-auto px-3 py-2">
+        <Tabs.TabsContent
+          value="params"
+          class="h-full"
+        >
+          <HttpKeyValueTable v-model="currentDraft.query" />
+        </Tabs.TabsContent>
+        <Tabs.TabsContent
+          value="headers"
+          class="h-full"
+        >
+          <HttpKeyValueTable v-model="currentDraft.headers" />
+        </Tabs.TabsContent>
+        <Tabs.TabsContent
+          value="body"
+          class="h-full"
+        >
+          <HttpRequestBodyTab v-model="currentDraft" />
+        </Tabs.TabsContent>
+        <Tabs.TabsContent
+          value="auth"
+          class="h-full"
+        >
+          <HttpRequestAuthTab v-model="currentDraft" />
+        </Tabs.TabsContent>
+        <Tabs.TabsContent
+          value="description"
+          class="h-full"
+        >
+          <HttpRequestDescriptionTab v-model="currentDraft" />
+        </Tabs.TabsContent>
+      </div>
+    </Tabs.Tabs>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestEditorPane.vue b/src/renderer/components/http/RequestEditorPane.vue
new file mode 100644
index 00000000..9064da23
--- /dev/null
+++ b/src/renderer/components/http/RequestEditorPane.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { useHttpRequests, useResizeHandle } from '@/composables'
+import { store } from '@/electron'
+
+const { currentRequest } = useHttpRequests()
+
+const RESPONSE_PANEL_DEFAULT_HEIGHT = 300
+const RESPONSE_PANEL_MIN_HEIGHT = 120
+const REQUEST_EDITOR_MIN_HEIGHT = 220
+
+const rootRef = ref<HTMLElement>()
+const responseHandleRef = ref<HTMLElement>()
+const responsePanelRef = ref<HTMLElement>()
+
+function normalizeResponseHeight(value: number | undefined) {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return undefined
+  }
+  if (value < RESPONSE_PANEL_MIN_HEIGHT) {
+    return RESPONSE_PANEL_DEFAULT_HEIGHT
+  }
+  return value
+}
+
+const responsePanelHeight = ref(
+  normalizeResponseHeight(
+    store.app.get('http.layout.responsePanelHeight') as number | undefined,
+  ),
+)
+
+function getCurrentResponseHeight() {
+  return (
+    responsePanelHeight.value
+    ?? responsePanelRef.value?.getBoundingClientRect().height
+    ?? RESPONSE_PANEL_DEFAULT_HEIGHT
+  )
+}
+
+function clampResponseHeight(value: number) {
+  const maxHeight = (() => {
+    const rootHeight = rootRef.value?.clientHeight ?? 0
+    if (!rootHeight) {
+      return value
+    }
+    return Math.max(
+      RESPONSE_PANEL_MIN_HEIGHT,
+      rootHeight - REQUEST_EDITOR_MIN_HEIGHT,
+    )
+  })()
+
+  return Math.min(Math.max(RESPONSE_PANEL_MIN_HEIGHT, value), maxHeight)
+}
+
+useResizeHandle(responseHandleRef, {
+  direction: 'vertical',
+  onStart() {
+    responsePanelHeight.value = clampResponseHeight(getCurrentResponseHeight())
+  },
+  onMove(dy) {
+    responsePanelHeight.value = clampResponseHeight(
+      getCurrentResponseHeight() - dy,
+    )
+  },
+  onEnd() {
+    if (responsePanelHeight.value !== undefined) {
+      store.app.set(
+        'http.layout.responsePanelHeight',
+        responsePanelHeight.value,
+      )
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    ref="rootRef"
+    class="flex h-full flex-col overflow-hidden pt-[var(--content-top-offset)]"
+  >
+    <div
+      class="min-h-0 flex-1"
+      :class="{
+        'basis-3/5': currentRequest && responsePanelHeight === undefined,
+      }"
+    >
+      <HttpRequestEditor />
+    </div>
+    <div
+      v-if="currentRequest"
+      ref="responseHandleRef"
+      class="before:bg-border hover:before:bg-primary data-[resizing]:before:bg-primary relative z-10 flex h-px shrink-0 cursor-row-resize items-center justify-center bg-transparent before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:transition-[background-color,height] before:duration-150 before:content-[''] after:absolute after:inset-x-0 after:top-1/2 after:h-3 after:-translate-y-1/2 after:content-[''] hover:before:h-0.5 hover:before:delay-200 data-[resizing]:before:h-0.5"
+    />
+    <div
+      v-if="currentRequest"
+      ref="responsePanelRef"
+      :style="
+        responsePanelHeight === undefined
+          ? undefined
+          : { height: `${responsePanelHeight}px` }
+      "
+      class="min-h-0 overflow-hidden"
+      :class="
+        responsePanelHeight === undefined ? 'flex-1 basis-2/5' : 'shrink-0'
+      "
+    >
+      <HttpBottomPanel />
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestPreviewPanel.vue b/src/renderer/components/http/RequestPreviewPanel.vue
new file mode 100644
index 00000000..f55e4189
--- /dev/null
+++ b/src/renderer/components/http/RequestPreviewPanel.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HttpRequestPreviewFormat } from './requestPreview'
+import { i18n } from '@/electron'
+
+const props = defineProps<{
+  content: string
+  format: HttpRequestPreviewFormat
+  wrapLines?: boolean
+}>()
+
+const viewerLanguage = computed(() => {
+  return props.format === 'http' ? 'http' : 'shell'
+})
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      v-if="!content"
+      class="flex flex-1 items-center justify-center"
+    >
+      <UiText class="text-muted-foreground text-sm">
+        {{ i18n.t("spaces.http.editor.preview.empty") }}
+      </UiText>
+    </div>
+    <HttpCodeViewer
+      v-else
+      class="min-h-0 flex-1"
+      :content="content"
+      :language="viewerLanguage"
+      :wrap-lines="props.wrapLines"
+    />
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestsList.vue b/src/renderer/components/http/RequestsList.vue
new file mode 100644
index 00000000..bd83496b
--- /dev/null
+++ b/src/renderer/components/http/RequestsList.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useHttpApp, useHttpSearch } from '@/composables'
+import { i18n } from '@/electron'
+
+const { httpState } = useHttpApp()
+const { displayedRequests, isSearch } = useHttpSearch()
+
+const filteredRequests = computed(() => {
+  const list = displayedRequests.value || []
+
+  if (isSearch.value || httpState.folderId === undefined) {
+    return list
+  }
+
+  return list.filter(r => r.folderId === httpState.folderId)
+})
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <HttpRequestsListHeader />
+    <div
+      v-if="filteredRequests.length === 0"
+      class="flex-1"
+    >
+      <UiEmptyPlaceholder :text="i18n.t('spaces.http.empty')" />
+    </div>
+    <div
+      v-else
+      class="scrollbar flex-grow overflow-y-auto px-2"
+    >
+      <HttpRequestsListItem
+        v-for="request in filteredRequests"
+        :key="request.id"
+        :request="request"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestsListHeader.vue b/src/renderer/components/http/RequestsListHeader.vue
new file mode 100644
index 00000000..f01916ed
--- /dev/null
+++ b/src/renderer/components/http/RequestsListHeader.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { Button } from '@/components/ui/shadcn/button'
+import { useHttpApp, useHttpRequests, useHttpSearch } from '@/composables'
+import { i18n } from '@/electron'
+import { Plus, Search, X } from 'lucide-vue-next'
+
+const { httpState, isFocusedSearch } = useHttpApp()
+const { createHttpRequestAndSelect } = useHttpRequests()
+const {
+  searchQuery,
+  clearSearch,
+  search,
+  searchSelectedIndex,
+  selectSearchRequest,
+  displayedRequests,
+  isSearch,
+} = useHttpSearch()
+
+watch(searchQuery, (v) => {
+  if (v) {
+    search()
+  }
+  else {
+    clearSearch(true)
+  }
+})
+
+async function onCreateRequest() {
+  await createHttpRequestAndSelect({
+    folderId: httpState.folderId ?? null,
+  })
+}
+
+function onKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    const nextIndex = Math.min(
+      searchSelectedIndex.value + 1,
+      (displayedRequests.value?.length || 0) - 1,
+    )
+    selectSearchRequest(nextIndex)
+  }
+  else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    const prevIndex = Math.max(searchSelectedIndex.value - 1, 0)
+    selectSearchRequest(prevIndex)
+  }
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    clearSearch(true)
+  }
+}
+</script>
+
+<template>
+  <div class="border-border mt-[var(--content-top-offset)] mb-2 border-b pb-1">
+    <div class="flex items-center px-1">
+      <Search class="text-muted-foreground ml-1 h-4 w-4" />
+      <div class="flex-grow">
+        <UiInput
+          v-model="searchQuery"
+          :placeholder="i18n.t('placeholder.search')"
+          variant="ghost"
+          :focus="isFocusedSearch"
+          @blur="isFocusedSearch = false"
+          @keydown="onKeydown"
+        />
+      </div>
+      <Button
+        v-if="searchQuery"
+        variant="ghost"
+        @click="clearSearch(true)"
+      >
+        <X class="h-4 w-4" />
+      </Button>
+      <UiActionButton
+        v-if="!isSearch"
+        :tooltip="i18n.t('spaces.http.action.newRequest')"
+        @click="onCreateRequest"
+      >
+        <Plus class="h-4 w-4" />
+      </UiActionButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/RequestsListItem.vue b/src/renderer/components/http/RequestsListItem.vue
new file mode 100644
index 00000000..fcda928c
--- /dev/null
+++ b/src/renderer/components/http/RequestsListItem.vue
@@ -0,0 +1,356 @@
+<script setup lang="ts">
+import type { HttpRequestListItem } from '@/composables/spaces/http/useHttpRequests'
+import * as ContextMenu from '@/components/ui/shadcn/context-menu'
+import {
+  useDialog,
+  useDonations,
+  useHttpApp,
+  useHttpEnvironments,
+  useHttpRequests,
+} from '@/composables'
+import { i18n, ipc } from '@/electron'
+import { isMac } from '@/utils'
+import { onClickOutside, useClipboard } from '@vueuse/core'
+import { format } from 'date-fns'
+import { buildHttpPreview } from './requestPreview'
+
+interface Props {
+  request: HttpRequestListItem
+}
+
+const props = defineProps<Props>()
+
+const {
+  highlightedRequestIds,
+  highlightedFolderIds,
+  focusedRequestId,
+  httpState,
+} = useHttpApp()
+const {
+  deleteHttpRequest,
+  duplicateHttpRequest,
+  selectFirstRequest,
+  selectHttpRequest,
+  selectedRequestIds,
+} = useHttpRequests()
+const { activeEnvironment } = useHttpEnvironments()
+const { copy } = useClipboard()
+
+const itemRef = ref<HTMLDivElement>()
+
+const isSelected = computed(() => httpState.requestId === props.request.id)
+const isInMultiSelection = computed(
+  () =>
+    selectedRequestIds.value.length > 1
+    && selectedRequestIds.value.includes(props.request.id),
+)
+const isHighlighted = computed(() =>
+  highlightedRequestIds.value.has(props.request.id),
+)
+const isFocused = computed(() => focusedRequestId.value === props.request.id)
+const isDuplicateDisabled = computed(() => selectedRequestIds.value.length > 1)
+const revealInFileManagerLabel = computed(() =>
+  isMac
+    ? i18n.t('action.reveal.inFinder')
+    : i18n.t('action.reveal.inFileManager'),
+)
+
+const previewVariables = computed<Record<string, string>>(() => {
+  return (activeEnvironment.value?.variables as Record<string, string>) ?? {}
+})
+
+function onClick(event: MouseEvent) {
+  selectHttpRequest(props.request.id, event.shiftKey)
+  focusedRequestId.value = props.request.id
+}
+
+function onClickContextMenu() {
+  highlightedFolderIds.value.clear()
+  highlightedRequestIds.value.clear()
+  highlightedRequestIds.value.add(props.request.id)
+
+  if (selectedRequestIds.value.length > 1) {
+    selectedRequestIds.value.forEach(id =>
+      highlightedRequestIds.value.add(id),
+    )
+  }
+}
+
+async function onDelete() {
+  const { confirm } = useDialog()
+  const targetIds = selectedRequestIds.value.includes(props.request.id)
+    ? [...selectedRequestIds.value]
+    : [props.request.id]
+
+  const isConfirmed = await confirm({
+    title:
+      targetIds.length > 1
+        ? i18n.t('messages:confirm.deleteConfirmMultipleSnippets', {
+            count: targetIds.length,
+          })
+        : i18n.t('messages:confirm.delete', { name: props.request.name }),
+    content: i18n.t('messages:warning.noUndo'),
+  })
+
+  if (!isConfirmed)
+    return
+
+  const wasCurrentSelected = targetIds.includes(httpState.requestId ?? -1)
+
+  for (const id of targetIds) {
+    await deleteHttpRequest(id)
+  }
+
+  if (wasCurrentSelected) {
+    selectFirstRequest()
+  }
+}
+
+async function onDuplicate() {
+  const id = await duplicateHttpRequest(props.request.id)
+  if (id) {
+    selectHttpRequest(id)
+    focusedRequestId.value = id
+  }
+}
+
+function onRevealInFileManager() {
+  void ipc.invoke('system:show-http-request-in-file-manager', props.request.id)
+}
+
+function onCopyRequest() {
+  copy(buildHttpPreview(props.request, { variables: previewVariables.value }))
+  useDonations().incrementCopy('http')
+}
+
+function onCopyRequestLink() {
+  copy(`masscode://goto?httpRequestId=${props.request.id}`)
+}
+
+function onDragStart(event: DragEvent) {
+  const ids
+    = selectedRequestIds.value.length > 1
+      ? selectedRequestIds.value
+      : [props.request.id]
+
+  event.dataTransfer?.setData('requestIds', JSON.stringify(ids))
+
+  const el = document.createElement('div')
+
+  if (selectedRequestIds.value.length > 1) {
+    el.className
+      = 'fixed left-[-100%] text-foreground truncate max-w-[200px] flex items-center'
+    el.id = 'ghost'
+    el.innerHTML = `
+      <span class="rounded-full bg-primary text-white px-2 py-0.5 text-xs ml-3">
+        ${selectedRequestIds.value.length}
+      </span>
+    `
+  }
+  else {
+    el.className = 'fixed left-[-100%] text-foreground truncate max-w-[200px]'
+    el.id = 'ghost'
+    el.innerHTML = props.request.name
+  }
+
+  document.body.appendChild(el)
+  event.dataTransfer?.setDragImage(el, 0, 0)
+  setTimeout(() => el.remove(), 0)
+}
+
+onClickOutside(itemRef, () => {
+  focusedRequestId.value = undefined
+  highlightedRequestIds.value.clear()
+})
+</script>
+
+<template>
+  <div
+    ref="itemRef"
+    data-http-request-item
+    class="border-border relative border-b px-1 focus-visible:outline-none"
+    :class="{
+      'is-selected': isSelected,
+      'is-multi-selected': isInMultiSelection,
+      'is-focused': isFocused,
+      'is-highlighted': isHighlighted,
+    }"
+    draggable="true"
+    @click="onClick"
+    @contextmenu="onClickContextMenu"
+    @dragstart.stop="onDragStart"
+  >
+    <ContextMenu.ContextMenu>
+      <ContextMenu.ContextMenuTrigger>
+        <div class="flex flex-col p-2 select-none">
+          <div class="mb-2 flex items-baseline gap-2">
+            <HttpMethodBadge
+              :method="props.request.method"
+              size="sm"
+              class="method-badge shrink-0"
+            />
+            <UiText class="title flex-1 truncate text-sm">
+              {{ props.request.name }}
+            </UiText>
+          </div>
+          <UiText
+            as="div"
+            variant="xs"
+            muted
+            class="meta flex items-center justify-between gap-2"
+          >
+            <span class="flex-1 truncate font-mono">
+              <template v-if="props.request.url">
+                {{ props.request.url }}
+              </template>
+              <span
+                v-else
+                class="opacity-60"
+              >
+                {{ i18n.t("spaces.http.noUrl") }}
+              </span>
+            </span>
+            <span class="shrink-0 tabular-nums">
+              {{ format(new Date(props.request.updatedAt), "dd.MM.yyyy") }}
+            </span>
+          </UiText>
+        </div>
+      </ContextMenu.ContextMenuTrigger>
+      <ContextMenu.ContextMenuContent>
+        <ContextMenu.ContextMenuItem @click="onRevealInFileManager">
+          {{ revealInFileManagerLabel }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuItem @click="onCopyRequest">
+          {{ i18n.t("action.copy.request") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuItem @click="onCopyRequestLink">
+          {{ i18n.t("action.copy.requestLink") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuItem
+          :disabled="isDuplicateDisabled"
+          @click="onDuplicate"
+        >
+          {{ i18n.t("action.duplicate") }}
+        </ContextMenu.ContextMenuItem>
+        <ContextMenu.ContextMenuSeparator />
+        <ContextMenu.ContextMenuItem @click="onDelete">
+          {{ i18n.t("action.delete.common") }}
+        </ContextMenu.ContextMenuItem>
+      </ContextMenu.ContextMenuContent>
+    </ContextMenu.ContextMenu>
+  </div>
+</template>
+
+<style lang="scss">
+@reference "../../styles.css";
+[data-http-request-item] {
+  &:not(.is-selected):not(.is-focused):not(.is-multi-selected) {
+    @apply hover:bg-accent-hover hover:rounded-md;
+  }
+  &.is-selected {
+    @apply bg-accent text-accent-foreground z-10 rounded-md border-transparent;
+    .title {
+      @apply text-accent-foreground;
+    }
+    .meta {
+      @apply text-accent-foreground;
+    }
+    .method-badge[data-method="GET"] {
+      @apply text-emerald-700 dark:text-emerald-300;
+    }
+    .method-badge[data-method="POST"] {
+      @apply text-amber-700 dark:text-amber-300;
+    }
+    .method-badge[data-method="PUT"] {
+      @apply text-blue-700 dark:text-blue-300;
+    }
+    .method-badge[data-method="PATCH"] {
+      @apply text-violet-700 dark:text-violet-300;
+    }
+    .method-badge[data-method="DELETE"] {
+      @apply text-rose-700 dark:text-rose-300;
+    }
+    .method-badge[data-method="HEAD"] {
+      @apply text-cyan-700 dark:text-cyan-300;
+    }
+    .method-badge[data-method="OPTIONS"] {
+      @apply text-zinc-700 dark:text-zinc-300;
+    }
+  }
+  &.is-multi-selected {
+    @apply bg-accent text-accent-foreground z-10 rounded-md border-transparent;
+    .title {
+      @apply text-accent-foreground;
+    }
+    .meta {
+      @apply text-accent-foreground;
+    }
+    .method-badge[data-method="GET"] {
+      @apply text-emerald-700 dark:text-emerald-300;
+    }
+    .method-badge[data-method="POST"] {
+      @apply text-amber-700 dark:text-amber-300;
+    }
+    .method-badge[data-method="PUT"] {
+      @apply text-blue-700 dark:text-blue-300;
+    }
+    .method-badge[data-method="PATCH"] {
+      @apply text-violet-700 dark:text-violet-300;
+    }
+    .method-badge[data-method="DELETE"] {
+      @apply text-rose-700 dark:text-rose-300;
+    }
+    .method-badge[data-method="HEAD"] {
+      @apply text-cyan-700 dark:text-cyan-300;
+    }
+    .method-badge[data-method="OPTIONS"] {
+      @apply text-zinc-700 dark:text-zinc-300;
+    }
+  }
+  &.is-focused:not(.is-multi-selected) {
+    @apply bg-primary text-primary-foreground z-10 rounded-md border-transparent;
+    .title {
+      @apply text-primary-foreground;
+    }
+    .meta {
+      @apply text-primary-foreground;
+    }
+    .method-badge[data-method="GET"] {
+      @apply text-emerald-200;
+    }
+    .method-badge[data-method="POST"] {
+      @apply text-amber-200;
+    }
+    .method-badge[data-method="PUT"] {
+      @apply text-blue-100;
+    }
+    .method-badge[data-method="PATCH"] {
+      @apply text-violet-200;
+    }
+    .method-badge[data-method="DELETE"] {
+      @apply text-rose-200;
+    }
+    .method-badge[data-method="HEAD"] {
+      @apply text-cyan-200;
+    }
+    .method-badge[data-method="OPTIONS"] {
+      @apply text-zinc-100;
+    }
+  }
+  &.is-highlighted {
+    @apply outline-primary rounded-md outline-2 -outline-offset-2;
+    &.is-focused,
+    &.is-selected,
+    &.is-multi-selected {
+      @apply bg-background text-accent-foreground;
+      .title {
+        @apply text-accent-foreground;
+      }
+      .meta {
+        @apply text-accent-foreground;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/renderer/components/http/ResponsePanel.vue b/src/renderer/components/http/ResponsePanel.vue
new file mode 100644
index 00000000..2c613798
--- /dev/null
+++ b/src/renderer/components/http/ResponsePanel.vue
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import * as Tabs from '@/components/ui/shadcn/tabs'
+import {
+  useCopyToClipboard,
+  useDonations,
+  useHttpExecute,
+  useHttpSettings,
+} from '@/composables'
+import { i18n } from '@/electron'
+import { Copy, LoaderCircle } from 'lucide-vue-next'
+
+const { lastResponse, lastError, isExecuting } = useHttpExecute()
+const { settings } = useHttpSettings()
+const copy = useCopyToClipboard()
+const { incrementCopy } = useDonations()
+
+const activeTab = ref<'body' | 'headers'>('body')
+
+const formattedBody = computed(() => {
+  const response = lastResponse.value
+  if (!response)
+    return ''
+  if (response.bodyKind === 'binary')
+    return ''
+  if (response.bodyKind === 'json') {
+    try {
+      return JSON.stringify(JSON.parse(response.body), null, 2)
+    }
+    catch {
+      return response.body
+    }
+  }
+  return response.body
+})
+
+const formattedHeaders = computed(() => {
+  const response = lastResponse.value
+  if (!response)
+    return ''
+
+  return response.headers
+    .map(header => `${header.key}: ${header.value}`)
+    .join('\n')
+})
+
+const copyValue = computed(() => {
+  return activeTab.value === 'headers'
+    ? formattedHeaders.value
+    : formattedBody.value
+})
+
+const bodyViewerLanguage = computed(() => {
+  return lastResponse.value?.bodyKind === 'json' ? 'json' : 'plain'
+})
+
+function copyActiveTab() {
+  if (copyValue.value) {
+    copy(copyValue.value)
+    incrementCopy('http')
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div
+      v-if="isExecuting"
+      class="text-muted-foreground flex flex-1 items-center justify-center gap-2 text-sm"
+    >
+      <LoaderCircle class="size-4 animate-spin" />
+      {{ i18n.t("spaces.http.editor.response.executing") }}
+    </div>
+    <div
+      v-else-if="!lastResponse"
+      class="flex flex-1 items-center justify-center"
+    >
+      <UiText class="text-muted-foreground text-sm">
+        {{ i18n.t("spaces.http.editor.response.empty") }}
+      </UiText>
+    </div>
+    <div
+      v-else
+      class="flex min-h-0 flex-1 flex-col"
+    >
+      <div
+        v-if="lastError"
+        class="border-border bg-destructive/10 text-destructive border-b px-3 py-1.5 text-xs"
+      >
+        {{ i18n.t("spaces.http.editor.response.error") }}: {{ lastError }}
+      </div>
+
+      <Tabs.Tabs
+        v-model="activeTab"
+        class="flex min-h-0 flex-1 flex-col gap-0"
+      >
+        <div
+          class="border-border flex items-center justify-between border-b px-3 py-1"
+        >
+          <Tabs.TabsList>
+            <Tabs.TabsTrigger value="body">
+              {{ i18n.t("spaces.http.editor.response.tabs.body") }}
+            </Tabs.TabsTrigger>
+            <Tabs.TabsTrigger value="headers">
+              {{ i18n.t("spaces.http.editor.response.tabs.headers") }}
+              <span
+                v-if="lastResponse.headers.length"
+                class="bg-muted text-muted-foreground ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded px-1 text-[10px] font-medium tabular-nums"
+              >
+                {{ lastResponse.headers.length }}
+              </span>
+            </Tabs.TabsTrigger>
+          </Tabs.TabsList>
+          <UiActionButton
+            v-if="copyValue"
+            :tooltip="i18n.t('spaces.http.editor.response.copy')"
+            @click="copyActiveTab"
+          >
+            <Copy class="size-4" />
+          </UiActionButton>
+        </div>
+
+        <div class="min-h-0 flex-1">
+          <Tabs.TabsContent
+            value="body"
+            class="m-0 h-full"
+          >
+            <div
+              v-if="lastResponse.bodyKind === 'binary'"
+              class="text-muted-foreground p-3 text-xs"
+            >
+              {{ i18n.t("spaces.http.editor.response.binaryNotice") }}
+            </div>
+            <HttpCodeViewer
+              v-else
+              :content="formattedBody"
+              :language="bodyViewerLanguage"
+              :wrap-lines="settings.wrapLines"
+            />
+          </Tabs.TabsContent>
+          <Tabs.TabsContent
+            value="headers"
+            class="scrollbar m-0 h-full overflow-auto"
+          >
+            <div class="flex flex-col">
+              <div
+                v-for="(header, index) in lastResponse.headers"
+                :key="index"
+                class="border-border grid grid-cols-[1fr_2fr] gap-2 border-b px-3 py-1.5 text-xs"
+              >
+                <span class="text-muted-foreground font-mono">{{
+                  header.key
+                }}</span>
+                <span class="font-mono break-all">{{ header.value }}</span>
+              </div>
+            </div>
+          </Tabs.TabsContent>
+        </div>
+      </Tabs.Tabs>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/http/VariableInput.vue b/src/renderer/components/http/VariableInput.vue
new file mode 100644
index 00000000..d152ee03
--- /dev/null
+++ b/src/renderer/components/http/VariableInput.vue
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { useHttpEnvironments } from '@/composables'
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'
+import { EditorState } from '@codemirror/state'
+import {
+  EditorView,
+  keymap,
+  placeholder as placeholderExt,
+} from '@codemirror/view'
+import {
+  refreshVariables,
+  varInterpolationExtension,
+} from './cm-extensions/varInterpolation'
+
+interface Props {
+  placeholder?: string
+}
+
+const props = defineProps<Props>()
+
+const model = defineModel<string>({ default: '' })
+
+const { activeEnvironment } = useHttpEnvironments()
+
+const editorContainer = ref<HTMLElement>()
+let view: EditorView | null = null
+let isApplyingExternalValue = false
+const URL_INPUT_FONT_FAMILY
+  = 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+
+function getVariables(): Record<string, string> {
+  return (activeEnvironment.value?.variables as Record<string, string>) ?? {}
+}
+
+function createTheme() {
+  return EditorView.theme({
+    '&': {
+      backgroundColor: 'transparent',
+      color: 'var(--foreground)',
+      fontSize: '14px',
+      fontFamily: URL_INPUT_FONT_FAMILY,
+      width: '100%',
+    },
+    '.cm-scroller': {
+      overflowY: 'hidden',
+      lineHeight: '1.5',
+    },
+    '.cm-content': {
+      padding: '0 0.5rem',
+      caretColor: 'var(--foreground)',
+      fontFamily: URL_INPUT_FONT_FAMILY,
+    },
+    '.cm-line': {
+      padding: '0',
+      fontFamily: URL_INPUT_FONT_FAMILY,
+    },
+    '.cm-gutters': {
+      display: 'none',
+    },
+    '&.cm-focused': {
+      outline: 'none',
+    },
+    '.cm-cursor': {
+      borderLeftColor: 'var(--foreground)',
+    },
+    '.cm-activeLine': {
+      backgroundColor: 'transparent',
+    },
+    '.cm-selectionBackground': {
+      backgroundColor:
+        'color-mix(in oklch, var(--primary) 24%, transparent) !important',
+    },
+    '&.cm-focused .cm-selectionBackground': {
+      backgroundColor:
+        'color-mix(in oklch, var(--primary) 24%, transparent) !important',
+    },
+    '.cm-placeholder': {
+      color: 'var(--muted-foreground)',
+    },
+  })
+}
+
+const singleLineFilter = EditorState.transactionFilter.of((tr) => {
+  if (!tr.docChanged)
+    return tr
+  const next = tr.newDoc.toString()
+  if (!next.includes('\n'))
+    return tr
+  return []
+})
+
+function createState(doc: string): EditorState {
+  return EditorState.create({
+    doc,
+    extensions: [
+      createTheme(),
+      history(),
+      keymap.of([...defaultKeymap, ...historyKeymap]),
+      placeholderExt(props.placeholder ?? ''),
+      singleLineFilter,
+      varInterpolationExtension({ getVariables }),
+      EditorView.updateListener.of((update) => {
+        if (!update.docChanged || isApplyingExternalValue)
+          return
+        model.value = update.state.doc.toString()
+      }),
+    ],
+  })
+}
+
+watch(model, (value) => {
+  if (!view)
+    return
+  const current = view.state.doc.toString()
+  if (current === value)
+    return
+  isApplyingExternalValue = true
+  view.dispatch({
+    changes: { from: 0, to: current.length, insert: value ?? '' },
+  })
+  isApplyingExternalValue = false
+})
+
+watch(
+  () => activeEnvironment.value?.variables,
+  () => {
+    if (view)
+      refreshVariables(view)
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  if (!editorContainer.value)
+    return
+  view = new EditorView({
+    state: createState(model.value),
+    parent: editorContainer.value,
+  })
+})
+
+onUnmounted(() => {
+  view?.destroy()
+  view = null
+})
+</script>
+
+<template>
+  <div
+    ref="editorContainer"
+    class="border-border focus-within:border-primary flex h-7 w-full cursor-text items-center rounded-md border bg-[color-mix(in_oklch,var(--foreground)_2%,var(--background))]"
+  />
+</template>
diff --git a/src/renderer/components/http/__tests__/requestPreview.test.ts b/src/renderer/components/http/__tests__/requestPreview.test.ts
new file mode 100644
index 00000000..0465303d
--- /dev/null
+++ b/src/renderer/components/http/__tests__/requestPreview.test.ts
@@ -0,0 +1,149 @@
+import type { HttpRequestDraft } from '@/composables'
+import { buildCurlPreview, buildHttpPreview } from '../requestPreview'
+
+function createDraft(
+  overrides: Partial<HttpRequestDraft> = {},
+): HttpRequestDraft {
+  return {
+    name: 'Request',
+    folderId: null,
+    method: 'GET',
+    url: 'https://api.example.com/users',
+    headers: [],
+    query: [],
+    bodyType: 'none',
+    body: null,
+    formData: [],
+    auth: { type: 'none' },
+    description: '',
+    ...overrides,
+  }
+}
+
+describe('request preview', () => {
+  it('builds raw HTTP preview with query, headers, auth, and body', () => {
+    const preview = buildHttpPreview(
+      createDraft({
+        method: 'POST',
+        query: [{ key: 'page size', value: '10', enabled: true }],
+        headers: [{ key: 'Accept', value: 'application/json' }],
+        auth: { type: 'bearer', token: 'token' },
+        bodyType: 'json',
+        body: '{"ok":true}',
+      }),
+    )
+
+    expect(preview).toBe(
+      [
+        'POST /users?page+size=10 HTTP/1.1',
+        'Host: api.example.com',
+        'Accept: application/json',
+        'Authorization: Bearer token',
+        'Content-Type: application/json',
+        '',
+        '{"ok":true}',
+      ].join('\n'),
+    )
+  })
+
+  it('builds Paw-style curl preview with shell-quoted values', () => {
+    const preview = buildCurlPreview(
+      createDraft({
+        name: 'Create user',
+        method: 'POST',
+        url: 'https://api.example.com/users?name=Anton',
+        headers: [{ key: 'X-Token', value: 'a\'b' }],
+        bodyType: 'json',
+        body: '{\n  "name": "Anton"\n}',
+      }),
+    )
+
+    expect(preview).toBe(
+      [
+        '## Create user',
+        'curl -X "POST" "https://api.example.com/users?name=Anton" \\',
+        '     -H \'X-Token: a\'\\\'\'b\' \\',
+        '     -H \'Content-Type: application/json\' \\',
+        '     -d $\'{',
+        '  "name": "Anton"',
+        '}\'',
+      ].join('\n'),
+    )
+  })
+
+  it('interpolates active environment variables in raw HTTP preview', () => {
+    const preview = buildHttpPreview(
+      createDraft({
+        method: 'GET',
+        url: '{{apiBaseUrl}}/users/{{userId}}',
+        query: [{ key: 'limit', value: '{{limit}}', enabled: true }],
+        headers: [{ key: 'X-Token', value: '{{token}}' }],
+        auth: { type: 'bearer', token: '{{token}}' },
+      }),
+      {
+        variables: {
+          apiBaseUrl: 'https://api.example.com',
+          limit: '10',
+          token: 'secret',
+          userId: '42',
+        },
+      },
+    )
+
+    expect(preview).toBe(
+      [
+        'GET /users/42?limit=10 HTTP/1.1',
+        'Host: api.example.com',
+        'X-Token: secret',
+        'Authorization: Bearer secret',
+      ].join('\n'),
+    )
+  })
+
+  it('interpolates body and form data values in curl preview', () => {
+    const jsonPreview = buildCurlPreview(
+      createDraft({
+        name: 'Create user',
+        method: 'POST',
+        url: '{{apiBaseUrl}}/users',
+        bodyType: 'json',
+        body: '{\n  "name": "{{name}}",\n  "role": "{{missing}}"\n}',
+      }),
+      {
+        variables: {
+          apiBaseUrl: 'https://api.example.com',
+          name: 'Anton',
+        },
+      },
+    )
+
+    expect(jsonPreview).toContain(
+      'curl -X "POST" "https://api.example.com/users"',
+    )
+    expect(jsonPreview).toContain('"name": "Anton"')
+    expect(jsonPreview).toContain('"role": "{{missing}}"')
+
+    const formPreview = buildCurlPreview(
+      createDraft({
+        name: 'Upload',
+        method: 'POST',
+        url: '{{apiBaseUrl}}/upload',
+        bodyType: 'multipart',
+        formData: [
+          { key: 'title', type: 'text', value: '{{name}}' },
+          { key: 'file', type: 'file', value: '{{filePath}}' },
+        ],
+      }),
+      {
+        variables: {
+          apiBaseUrl: 'https://api.example.com',
+          filePath: '/tmp/demo.txt',
+          name: 'Anton',
+        },
+      },
+    )
+
+    expect(formPreview).toContain('-F \'title=Anton\'')
+    expect(formPreview).toContain('-F \'file=@{{filePath}}\'')
+  })
+})
diff --git a/src/renderer/components/http/cm-extensions/varInterpolation.ts b/src/renderer/components/http/cm-extensions/varInterpolation.ts
new file mode 100644
index 00000000..3ef43aac
--- /dev/null
+++ b/src/renderer/components/http/cm-extensions/varInterpolation.ts
@@ -0,0 +1,198 @@
+import type {
+  CompletionContext,
+  CompletionResult,
+} from '@codemirror/autocomplete'
+import type { Extension } from '@codemirror/state'
+import type { DecorationSet, ViewUpdate } from '@codemirror/view'
+import { autocompletion } from '@codemirror/autocomplete'
+import { Annotation, RangeSetBuilder } from '@codemirror/state'
+import { Decoration, EditorView, ViewPlugin } from '@codemirror/view'
+
+export const refreshVariablesAnnotation = Annotation.define<null>()
+
+export function refreshVariables(view: EditorView) {
+  view.dispatch({ annotations: refreshVariablesAnnotation.of(null) })
+}
+
+const VAR_REGEX = /\{\{([^{}]+)\}\}/g
+const TRIGGER_REGEX = /\{\{([^{}]*)$/
+
+const knownVarMark = Decoration.mark({ class: 'cm-var cm-var-known' })
+const unknownVarMark = Decoration.mark({ class: 'cm-var cm-var-unknown' })
+
+export interface VarInterpolationOptions {
+  getVariables: () => Record<string, string>
+}
+
+function buildDecorations(
+  view: EditorView,
+  variables: Record<string, string>,
+): DecorationSet {
+  const builder = new RangeSetBuilder<Decoration>()
+
+  for (const { from, to } of view.visibleRanges) {
+    const text = view.state.doc.sliceString(from, to)
+    let match: RegExpExecArray | null
+    VAR_REGEX.lastIndex = 0
+    // eslint-disable-next-line no-cond-assign
+    while ((match = VAR_REGEX.exec(text)) !== null) {
+      const start = from + match.index
+      const end = start + match[0].length
+      const name = match[1].trim()
+      const isKnown = Object.prototype.hasOwnProperty.call(variables, name)
+      builder.add(start, end, isKnown ? knownVarMark : unknownVarMark)
+    }
+  }
+
+  return builder.finish()
+}
+
+function varDecorationPlugin(opts: VarInterpolationOptions) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet
+
+      constructor(view: EditorView) {
+        this.decorations = buildDecorations(view, opts.getVariables())
+      }
+
+      update(update: ViewUpdate) {
+        const refreshed = update.transactions.some(
+          tr => tr.annotation(refreshVariablesAnnotation) !== undefined,
+        )
+        if (update.docChanged || update.viewportChanged || refreshed) {
+          this.decorations = buildDecorations(update.view, opts.getVariables())
+        }
+      }
+    },
+    {
+      decorations: v => v.decorations,
+    },
+  )
+}
+
+function varCompletionSource(opts: VarInterpolationOptions) {
+  return (context: CompletionContext): CompletionResult | null => {
+    const before = context.state.doc.sliceString(0, context.pos)
+    const match = TRIGGER_REGEX.exec(before)
+    if (!match)
+      return null
+
+    const variables = opts.getVariables()
+    const keys = Object.keys(variables)
+    if (keys.length === 0)
+      return null
+
+    const after = context.state.doc.sliceString(
+      context.pos,
+      Math.min(context.pos + 2, context.state.doc.length),
+    )
+    const closingPresent = after.startsWith('}}')
+
+    return {
+      from: context.pos - match[1].length,
+      options: keys.map(name => ({
+        label: name,
+        detail: variables[name],
+        type: 'variable',
+        apply: closingPresent ? name : `${name}}}`,
+      })),
+      validFor: /^[^{}]*$/,
+    }
+  }
+}
+
+const varInterpolationTheme = EditorView.theme({
+  '.cm-var': {
+    borderRadius: '3px',
+    boxDecorationBreak: 'clone',
+    WebkitBoxDecorationBreak: 'clone',
+  },
+  '.cm-var-known': {
+    color: 'var(--http-var-known-fg)',
+    backgroundColor: 'var(--http-var-known-bg)',
+  },
+  '.cm-var-unknown': {
+    color: 'var(--destructive)',
+    backgroundColor: 'oklch(from var(--destructive) l c h / 0.16)',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete': {
+    backgroundColor: 'var(--popover)',
+    color: 'var(--popover-foreground)',
+    border: '1px solid var(--border)',
+    borderRadius: '6px',
+    boxShadow:
+      '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    fontFamily: 'inherit',
+    fontSize: '14px',
+    minWidth: '8rem',
+    padding: '4px',
+    overflow: 'hidden',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    fontFamily: 'inherit',
+    maxHeight: '14rem',
+    margin: '0',
+    padding: '0',
+    listStyle: 'none',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+    height: '28px',
+    padding: '0 0.5rem',
+    borderRadius: '2px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    cursor: 'default',
+    userSelect: 'none',
+    color: 'var(--popover-foreground)',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+    backgroundColor: 'var(--accent)',
+    color: 'var(--accent-foreground)',
+  },
+  '.cm-completionLabel': {
+    flex: '1',
+    minWidth: '0',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+  '.cm-completionMatchedText': {
+    color: 'var(--primary)',
+    textDecoration: 'none',
+    fontWeight: '500',
+  },
+  '.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionMatchedText':
+    {
+      color: 'inherit',
+    },
+  '.cm-completionDetail': {
+    color: 'var(--muted-foreground)',
+    fontStyle: 'normal',
+    marginLeft: 'auto',
+    fontSize: '12px',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '12rem',
+  },
+  '.cm-tooltip-autocomplete > ul > li[aria-selected] .cm-completionDetail': {
+    color: 'inherit',
+    opacity: '0.8',
+  },
+})
+
+export function varInterpolationExtension(
+  opts: VarInterpolationOptions,
+): Extension {
+  return [
+    varDecorationPlugin(opts),
+    autocompletion({
+      override: [varCompletionSource(opts)],
+      activateOnTyping: true,
+      icons: false,
+    }),
+    varInterpolationTheme,
+  ]
+}
diff --git a/src/renderer/components/http/requestPreview.ts b/src/renderer/components/http/requestPreview.ts
new file mode 100644
index 00000000..3d1ccb63
--- /dev/null
+++ b/src/renderer/components/http/requestPreview.ts
@@ -0,0 +1,295 @@
+import type { HttpRequestDraft } from '@/composables'
+import type { HttpAuth, HttpHeaderEntry } from '~/main/types/http'
+import { interpolateHttpVariables } from '~/shared/httpVariables'
+
+export type HttpRequestPreviewFormat = 'http' | 'curl'
+
+interface HttpRequestPreviewOptions {
+  variables?: Record<string, string>
+}
+
+const BODY_CONTENT_TYPES: Partial<
+  Record<HttpRequestDraft['bodyType'], string>
+> = {
+  'json': 'application/json',
+  'text': 'text/plain',
+  'form-urlencoded': 'application/x-www-form-urlencoded',
+}
+
+function splitUrl(url: string): {
+  path: string
+  query: string
+  fragment: string
+} {
+  const hashIdx = url.indexOf('#')
+  const fragment = hashIdx === -1 ? '' : url.slice(hashIdx)
+  const beforeHash = hashIdx === -1 ? url : url.slice(0, hashIdx)
+  const qIdx = beforeHash.indexOf('?')
+  const path = qIdx === -1 ? beforeHash : beforeHash.slice(0, qIdx)
+  const query = qIdx === -1 ? '' : beforeHash.slice(qIdx + 1)
+  return { path, query, fragment }
+}
+
+function buildQueryString(query: HttpRequestDraft['query']): string {
+  return query
+    .filter(entry => entry.enabled !== false && entry.key)
+    .map(entry => `${entry.key}=${entry.value}`)
+    .join('&')
+}
+
+function buildPreviewUrl(draft: HttpRequestDraft): string {
+  const queryString = buildQueryString(draft.query)
+
+  try {
+    const url = new URL(draft.url)
+    if (draft.query.length > 0) {
+      url.search = ''
+      for (const entry of draft.query) {
+        if (entry.enabled === false)
+          continue
+        if (entry.key) {
+          url.searchParams.append(entry.key, entry.value)
+        }
+      }
+    }
+    return url.toString()
+  }
+  catch {
+    if (!queryString) {
+      return draft.url
+    }
+
+    const parts = splitUrl(draft.url)
+    return (
+      parts.path
+      + (queryString ? `?${queryString}` : '')
+      + (parts.fragment || '')
+    )
+  }
+}
+
+function getHttpUrlParts(url: string): { host: string, target: string } {
+  try {
+    const parsed = new URL(url)
+    return {
+      host: parsed.host,
+      target: `${parsed.pathname || '/'}${parsed.search}`,
+    }
+  }
+  catch {
+    const parts = splitUrl(url)
+    return {
+      host: '',
+      target: `${parts.path || '/'}${parts.query ? `?${parts.query}` : ''}`,
+    }
+  }
+}
+
+function encodeBasicCredentials(username: string, password: string): string {
+  try {
+    return btoa(`${username}:${password}`)
+  }
+  catch {
+    return `${username}:${password}`
+  }
+}
+
+function authHeaders(auth: HttpAuth): HttpHeaderEntry[] {
+  if (auth.type === 'bearer' && auth.token) {
+    return [{ key: 'Authorization', value: `Bearer ${auth.token}` }]
+  }
+
+  if (auth.type === 'basic' && auth.username !== undefined) {
+    return [
+      {
+        key: 'Authorization',
+        value: `Basic ${encodeBasicCredentials(
+          auth.username,
+          auth.password ?? '',
+        )}`,
+      },
+    ]
+  }
+
+  return []
+}
+
+function hasHeader(headers: HttpHeaderEntry[], name: string): boolean {
+  return headers.some(header => header.key.toLowerCase() === name)
+}
+
+function getPreviewHeaders(draft: HttpRequestDraft): HttpHeaderEntry[] {
+  const headers = [
+    ...draft.headers.filter(entry => entry.enabled !== false && entry.key),
+    ...authHeaders(draft.auth),
+  ]
+
+  const contentType = BODY_CONTENT_TYPES[draft.bodyType]
+  if (contentType && !hasHeader(headers, 'content-type')) {
+    headers.push({ key: 'Content-Type', value: contentType })
+  }
+
+  return headers
+}
+
+function shellSingleQuote(value: string): string {
+  return `'${value.replaceAll('\'', '\'\\\'\'')}'`
+}
+
+function shellDoubleQuote(value: string): string {
+  return `"${value
+    .replaceAll('\\', '\\\\')
+    .replaceAll('"', '\\"')
+    .replaceAll('$', '\\$')
+    .replaceAll('`', '\\`')}"`
+}
+
+function shellAnsiCString(value: string): string {
+  return `$'${value.replaceAll('\\', '\\\\').replaceAll('\'', '\\\'')}'`
+}
+
+function bodyLines(draft: HttpRequestDraft): string[] {
+  if (
+    draft.bodyType === 'json'
+    || draft.bodyType === 'text'
+    || draft.bodyType === 'form-urlencoded'
+  ) {
+    return draft.body ? draft.body.split('\n') : []
+  }
+
+  if (draft.bodyType === 'multipart') {
+    return draft.formData
+      .filter(entry => entry.key)
+      .map((entry) => {
+        const value = entry.type === 'file' ? `@${entry.value}` : entry.value
+        return `${entry.key}=${value}`
+      })
+  }
+
+  return []
+}
+
+function interpolateAuth(
+  auth: HttpAuth,
+  variables: Record<string, string>,
+): HttpAuth {
+  return {
+    type: auth.type,
+    token:
+      auth.token !== undefined
+        ? interpolateHttpVariables(auth.token, variables)
+        : auth.token,
+    username:
+      auth.username !== undefined
+        ? interpolateHttpVariables(auth.username, variables)
+        : auth.username,
+    password:
+      auth.password !== undefined
+        ? interpolateHttpVariables(auth.password, variables)
+        : auth.password,
+  }
+}
+
+function interpolateDraft(
+  draft: HttpRequestDraft,
+  variables: Record<string, string> | undefined,
+): HttpRequestDraft {
+  if (!variables || Object.keys(variables).length === 0) {
+    return draft
+  }
+
+  return {
+    ...draft,
+    url: interpolateHttpVariables(draft.url, variables),
+    headers: draft.headers.map(header => ({
+      ...header,
+      value: interpolateHttpVariables(header.value, variables),
+    })),
+    query: draft.query.map(entry => ({
+      ...entry,
+      value: interpolateHttpVariables(entry.value, variables),
+    })),
+    body:
+      draft.body !== null
+        ? interpolateHttpVariables(draft.body, variables)
+        : draft.body,
+    formData: draft.formData.map(entry => ({
+      ...entry,
+      value:
+        entry.type === 'text'
+          ? interpolateHttpVariables(entry.value, variables)
+          : entry.value,
+    })),
+    auth: interpolateAuth(draft.auth, variables),
+  }
+}
+
+export function buildHttpPreview(
+  draft: HttpRequestDraft,
+  options: HttpRequestPreviewOptions = {},
+): string {
+  const previewDraft = interpolateDraft(draft, options.variables)
+  const url = buildPreviewUrl(previewDraft)
+  const { host, target } = getHttpUrlParts(url)
+  const headers = getPreviewHeaders(previewDraft)
+  const lines = [`${previewDraft.method} ${target || '/'} HTTP/1.1`]
+
+  if (host && !hasHeader(headers, 'host')) {
+    lines.push(`Host: ${host}`)
+  }
+
+  for (const header of headers) {
+    lines.push(`${header.key}: ${header.value}`)
+  }
+
+  const body = bodyLines(previewDraft)
+  if (body.length > 0) {
+    lines.push('', ...body)
+  }
+
+  return lines.join('\n')
+}
+
+export function buildCurlPreview(
+  draft: HttpRequestDraft,
+  options: HttpRequestPreviewOptions = {},
+): string {
+  const previewDraft = interpolateDraft(draft, options.variables)
+  const url = buildPreviewUrl(previewDraft)
+  const indent = '     '
+  const lines = [
+    `curl -X ${shellDoubleQuote(previewDraft.method)} ${shellDoubleQuote(url)}`,
+  ]
+
+  for (const header of getPreviewHeaders(previewDraft)) {
+    lines.push(
+      `${indent}-H ${shellSingleQuote(`${header.key}: ${header.value}`)}`,
+    )
+  }
+
+  if (previewDraft.bodyType === 'multipart') {
+    for (const entry of previewDraft.formData.filter(entry => entry.key)) {
+      const value = entry.type === 'file' ? `@${entry.value}` : entry.value
+      lines.push(`${indent}-F ${shellSingleQuote(`${entry.key}=${value}`)}`)
+    }
+  }
+  else if (previewDraft.bodyType !== 'none' && previewDraft.body) {
+    lines.push(`${indent}-d ${shellAnsiCString(previewDraft.body)}`)
+  }
+
+  const command = lines
+    .map((line, index) => (index === lines.length - 1 ? line : `${line} \\`))
+    .join('\n')
+
+  return [`## ${previewDraft.name}`, command].join('\n')
+}
+
+export function buildRequestPreview(
+  draft: HttpRequestDraft,
+  format: HttpRequestPreviewFormat,
+  options: HttpRequestPreviewOptions = {},
+): string {
+  return format === 'http'
+    ? buildHttpPreview(draft, options)
+    : buildCurlPreview(draft, options)
+}
diff --git a/src/renderer/components/notes/InternalLinksOverlay.vue b/src/renderer/components/notes/InternalLinksOverlay.vue
index 28c93ffb..fdc8b729 100644
--- a/src/renderer/components/notes/InternalLinksOverlay.vue
+++ b/src/renderer/components/notes/InternalLinksOverlay.vue
@@ -4,7 +4,7 @@ import * as Popover from '@/components/ui/shadcn/popover'
 import { i18n } from '@/electron'
 import { cn } from '@/utils'
 import { useWindowSize } from '@vueuse/core'
-import { Code2, FileText } from 'lucide-vue-next'
+import { Code2, FileText, Send } from 'lucide-vue-next'
 import {
   getInternalLinksPickerLayout,
   INTERNAL_LINKS_PICKER_WIDTH,
@@ -88,6 +88,9 @@ const pickerGroups = computed(() => {
   const notes = internalLinksPickerState.items.filter(
     item => item.type === 'note',
   )
+  const httpRequests = internalLinksPickerState.items.filter(
+    item => item.type === 'http-request',
+  )
 
   return [
     {
@@ -95,6 +98,11 @@ const pickerGroups = computed(() => {
       key: 'snippet',
       title: i18n.t('internalLinks.picker.groups.snippets'),
     },
+    {
+      items: httpRequests,
+      key: 'http-request',
+      title: i18n.t('internalLinks.picker.groups.httpRequests'),
+    },
     {
       items: notes,
       key: 'note',
@@ -104,7 +112,15 @@ const pickerGroups = computed(() => {
 })
 
 function getItemIcon(type: InternalLinkPickerItem['type']) {
-  return type === 'snippet' ? Code2 : FileText
+  if (type === 'snippet') {
+    return Code2
+  }
+
+  if (type === 'http-request') {
+    return Send
+  }
+
+  return FileText
 }
 
 function getPickerItemKey(item: InternalLinkPickerItem) {
diff --git a/src/renderer/components/notes/NotesEditor.vue b/src/renderer/components/notes/NotesEditor.vue
index 000aada7..8ab5f2d2 100644
--- a/src/renderer/components/notes/NotesEditor.vue
+++ b/src/renderer/components/notes/NotesEditor.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type { NotesEditorMode } from '@/composables/spaces/notes/useNotesApp'
+import { createCodeHighlight } from '@/components/cm-extensions/codeHighlight'
+import { editorScrollbarTheme } from '@/components/cm-extensions/scrollbarTheme'
 import {
   applyPendingNavigationUIStateForNote,
   registerNavigationNoteUIState,
@@ -19,7 +21,6 @@ import {
   placeholder,
 } from '@codemirror/view'
 import { GFM, type MarkdownConfig } from '@lezer/markdown'
-import { createCodeHighlight } from './cm-extensions/codeHighlight'
 import { editorFocusExtension } from './cm-extensions/editorFocus'
 import { createExternalLinksNavigation } from './cm-extensions/externalLinks'
 import { createHideMarkup } from './cm-extensions/hideMarkup'
@@ -36,7 +37,6 @@ import { Highlight } from './cm-extensions/markdownHighlight'
 import { markdownShortcuts } from './cm-extensions/markdownShortcuts'
 import { createMermaidBlocks } from './cm-extensions/mermaidBlocks'
 import { moveSelectionToAdjacentMermaidSource } from './cm-extensions/mermaidNavigation'
-import { notesEditorScrollbarTheme } from './cm-extensions/scrollbarTheme'
 import { createTableBlocks } from './cm-extensions/tableBlocks'
 import { moveSelectionToAdjacentTableSource } from './cm-extensions/tableNavigation'
 import { createNotesEditTheme } from './theme'
@@ -148,7 +148,7 @@ const presentationTheme = EditorView.theme({
   '.cm-gutters': {
     display: 'none',
   },
-  ...notesEditorScrollbarTheme,
+  ...editorScrollbarTheme,
   '.cm-line': {
     padding: '0',
   },
diff --git a/src/renderer/components/notes/cm-extensions/__tests__/fixtures/languages.md b/src/renderer/components/notes/cm-extensions/__tests__/fixtures/languages.md
index 478c3851..53866921 100644
--- a/src/renderer/components/notes/cm-extensions/__tests__/fixtures/languages.md
+++ b/src/renderer/components/notes/cm-extensions/__tests__/fixtures/languages.md
@@ -9,7 +9,8 @@ const API_URL = 'https://api.example.com'
 
 async function fetchUsers(page = 1) {
   const res = await fetch(`${API_URL}/users?page=${page}`)
-  if (!res.ok) throw new Error(`HTTP ${res.status}`)
+  if (!res.ok)
+    throw new Error(`HTTP ${res.status}`)
   return res.json()
 }
 
@@ -415,8 +416,8 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-serde = { version = "1.0", features = ["derive"] }
-tokio = { version = "1", features = ["full"] }
+serde = { version = "1.0", features = [ "derive" ] }
+tokio = { version = "1", features = [ "full" ] }
 ```
 
 ## XML
@@ -480,7 +481,9 @@ const doubled = computed(() => count.value * 2)
 <template>
   <div class="counter">
     <span>{{ count }} (× 2 = {{ doubled }})</span>
-    <button @click="increment">+</button>
+    <button @click="increment">
+      +
+    </button>
   </div>
 </template>
 ```
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/decorations.test.ts b/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/decorations.test.ts
index f75368f9..98347127 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/decorations.test.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/decorations.test.ts
@@ -18,7 +18,10 @@ vi.mock('@/electron', () => ({
 
 vi.mock('@/services/api', () => ({
   api: {
+    httpRequests: { getHttpRequestsById: vi.fn(), getHttpRequests: vi.fn() },
+    httpFolders: { getHttpFolders: vi.fn() },
     notes: { getNotesById: vi.fn() },
+    noteFolders: { getNoteFolders: vi.fn() },
     snippets: { getSnippetsById: vi.fn() },
   },
 }))
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/navigation.test.ts b/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/navigation.test.ts
index f4cc3ec8..60ea634f 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/navigation.test.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/navigation.test.ts
@@ -71,6 +71,34 @@ describe('handleInternalLinkMouseDown', () => {
     expect(openInternalTarget).toHaveBeenCalledWith({ id: 15, type: 'note' })
   })
 
+  it('navigates to HTTP request links', () => {
+    const preventDefault = vi.fn()
+    const dispatch = vi.fn()
+
+    const handled = handleInternalLinkMouseDown(
+      { dispatch } as any,
+      {
+        ctrlKey: false,
+        metaKey: true,
+        preventDefault,
+      } as unknown as MouseEvent,
+      createLinkElement({
+        internalLinkBroken: 'false',
+        internalLinkFrom: '10',
+        internalLinkId: '8',
+        internalLinkType: 'http-request',
+      }),
+    )
+
+    expect(handled).toBe(true)
+    expect(preventDefault).toHaveBeenCalledTimes(1)
+    expect(dispatch).not.toHaveBeenCalled()
+    expect(openInternalTarget).toHaveBeenCalledWith({
+      id: 8,
+      type: 'http-request',
+    })
+  })
+
   it('moves caret into the raw link on plain mousedown', () => {
     const preventDefault = vi.fn()
     const dispatch = vi.fn()
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/trigger.test.ts b/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/trigger.test.ts
index 2aac1d12..9b6cf6c2 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/trigger.test.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/__tests__/trigger.test.ts
@@ -27,7 +27,10 @@ vi.mock('@/electron', () => ({
 
 vi.mock('@/services/api', () => ({
   api: {
+    httpFolders: { getHttpFolders: vi.fn() },
+    httpRequests: { getHttpRequests: vi.fn() },
     notes: { getNotes: vi.fn() },
+    noteFolders: { getNoteFolders: vi.fn() },
     snippets: { getSnippets: vi.fn() },
   },
 }))
@@ -136,6 +139,9 @@ describe('findInternalLinkSearchMatch', () => {
     expect(
       findInternalLinkSearchMatch('Hello [[note:12|Doc label', 26),
     ).toBeNull()
+    expect(
+      findInternalLinkSearchMatch('Hello [[http-request:8|Create snippet', 37),
+    ).toBeNull()
   })
 })
 
@@ -327,6 +333,30 @@ describe('pickShortestUniqueInsertTarget', () => {
     )
   })
 
+  it('returns full folder path when another HTTP request shares the same name', () => {
+    const selected = {
+      folderPath: 'API',
+      id: 1,
+      locationLabel: 'API',
+      name: 'Create snippet',
+      type: 'http-request' as const,
+    }
+    const items = [
+      selected,
+      {
+        folderPath: 'Admin',
+        id: 2,
+        locationLabel: 'Admin',
+        name: 'Create snippet',
+        type: 'http-request' as const,
+      },
+    ]
+
+    expect(pickShortestUniqueInsertTarget(selected, items)).toBe(
+      'API/Create snippet',
+    )
+  })
+
   it('matches duplicate names case-insensitively', () => {
     const selected = {
       folderPath: 'Projects',
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/cache.ts b/src/renderer/components/notes/cm-extensions/internalLinks/cache.ts
index 40820efe..dc228ea2 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/cache.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/cache.ts
@@ -8,6 +8,7 @@ export interface CachedEntityData {
   isDeleted: number
   firstContent?: { language: string, value: string | null } | null
   contentExcerpt?: string
+  request?: { method: string, url: string, description: string }
 }
 
 export type CachedEntity =
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/decorations.ts b/src/renderer/components/notes/cm-extensions/internalLinks/decorations.ts
index 660a842a..444731b1 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/decorations.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/decorations.ts
@@ -81,10 +81,21 @@ function createTypeIcon(type: InternalLinkType): SVGSVGElement {
     'd',
     type === 'snippet'
       ? 'M8 9l-3 3 3 3M16 9l3 3-3 3M13 6l-2 12'
-      : 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
+      : type === 'http-request'
+        ? 'm22 2-7 20-4-9-9-4Z'
+        : 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z',
   )
   svg.append(path)
 
+  if (type === 'http-request') {
+    const second = document.createElementNS(
+      'http://www.w3.org/2000/svg',
+      'path',
+    )
+    second.setAttribute('d', 'M22 2 11 13')
+    svg.append(second)
+  }
+
   if (type === 'note') {
     const second = document.createElementNS(
       'http://www.w3.org/2000/svg',
@@ -140,7 +151,9 @@ class InternalLinkWidget extends WidgetType {
       root.title = i18n.t(
         this.resolvedTarget?.type === 'snippet'
           ? 'internalLinks.missing.snippet'
-          : 'internalLinks.missing.note',
+          : this.resolvedTarget?.type === 'http-request'
+            ? 'internalLinks.missing.httpRequest'
+            : 'internalLinks.missing.note',
       )
     }
 
@@ -190,6 +203,26 @@ export async function fetchInternalLinkEntity(
       }
     }
 
+    if (type === 'http-request') {
+      const { data } = await api.httpRequests.getHttpRequestsById(String(id))
+
+      return {
+        exists: true,
+        data: {
+          folder: null,
+          id: data.id,
+          isDeleted: 0,
+          name: data.name,
+          request: {
+            description: data.description,
+            method: data.method,
+            url: data.url,
+          },
+          type,
+        },
+      }
+    }
+
     const { data } = await api.notes.getNotesById(String(id))
 
     if (data.isDeleted) {
@@ -222,14 +255,22 @@ async function resolveInternalLinkByTitle(
       return { exists: false }
     }
 
-    const [{ data: snippets }, { data: notes }, { data: noteFolders }]
-      = await Promise.all([
-        api.snippets.getSnippets({ search: basename, isDeleted: 0 }),
-        api.notes.getNotes({ search: basename, isDeleted: 0 }),
-        api.noteFolders.getNoteFolders(),
-      ])
+    const [
+      { data: snippets },
+      { data: notes },
+      { data: noteFolders },
+      { data: httpRequests },
+      { data: httpFolders },
+    ] = await Promise.all([
+      api.snippets.getSnippets({ search: basename, isDeleted: 0 }),
+      api.notes.getNotes({ search: basename, isDeleted: 0 }),
+      api.noteFolders.getNoteFolders(),
+      api.httpRequests.getHttpRequests({ search: basename }),
+      api.httpFolders.getHttpFolders(),
+    ])
 
     const folderPathById = buildNoteFolderPathMap(noteFolders)
+    const httpFolderPathById = buildNoteFolderPathMap(httpFolders)
 
     const resolvedTarget = resolveInternalLinkTargetByTitle(title, [
       ...snippets.map<InternalLinkLookupItem>(snippet => ({
@@ -245,6 +286,15 @@ async function resolveInternalLinkByTitle(
         name: note.name,
         type: 'note',
       })),
+      ...httpRequests.map<InternalLinkLookupItem>(request => ({
+        folderPath:
+          request.folderId === null
+            ? ''
+            : (httpFolderPathById.get(request.folderId) ?? ''),
+        id: request.id,
+        name: request.name,
+        type: 'http-request',
+      })),
     ])
 
     if (!resolvedTarget) {
@@ -275,6 +325,31 @@ async function resolveInternalLinkByTitle(
       }
     }
 
+    if (resolvedTarget.type === 'http-request') {
+      const request = httpRequests.find(
+        item => item.id === resolvedTarget.id,
+      )
+      if (!request) {
+        return { exists: false }
+      }
+
+      return {
+        exists: true,
+        data: {
+          folder: null,
+          id: request.id,
+          isDeleted: 0,
+          name: request.name,
+          request: {
+            description: request.description,
+            method: request.method,
+            url: request.url,
+          },
+          type: 'http-request',
+        },
+      }
+    }
+
     const note = notes.find(item => item.id === resolvedTarget.id)
     if (!note) {
       return { exists: false }
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/navigation.ts b/src/renderer/components/notes/cm-extensions/internalLinks/navigation.ts
index 2c250634..d1384b43 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/navigation.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/navigation.ts
@@ -49,7 +49,10 @@ export function handleInternalLinkMouseDown(
     const type = link.dataset.internalLinkType
     const id = Number(link.dataset.internalLinkId)
 
-    if ((type !== 'snippet' && type !== 'note') || !id) {
+    if (
+      (type !== 'snippet' && type !== 'note' && type !== 'http-request')
+      || !id
+    ) {
       return false
     }
 
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/preview.ts b/src/renderer/components/notes/cm-extensions/internalLinks/preview.ts
index d790894e..10a7d5e8 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/preview.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/preview.ts
@@ -146,6 +146,19 @@ function getCacheKey(type: InternalLinkType, id: number) {
 function buildPreviewContent(
   entity: CachedEntityData,
 ): InternalLinksPreviewContent {
+  if (entity.type === 'http-request') {
+    return {
+      body: [
+        [entity.request?.method, entity.request?.url].filter(Boolean).join(' '),
+        entity.request?.description.trim(),
+      ]
+        .filter(Boolean)
+        .join('\n\n'),
+      title: entity.name,
+      type: entity.type,
+    }
+  }
+
   return {
     body:
       entity.type === 'snippet'
diff --git a/src/renderer/components/notes/cm-extensions/internalLinks/trigger.ts b/src/renderer/components/notes/cm-extensions/internalLinks/trigger.ts
index 8de550b9..3fa4f4c2 100644
--- a/src/renderer/components/notes/cm-extensions/internalLinks/trigger.ts
+++ b/src/renderer/components/notes/cm-extensions/internalLinks/trigger.ts
@@ -113,7 +113,7 @@ export function findInternalLinkSearchMatch(
 }
 
 function isStoredInternalLinkPayload(payload: string): boolean {
-  return /^(?:snippet|note):\d+\|.*$/.test(payload)
+  return /^(?:snippet|note|http-request):\d+\|.*$/.test(payload)
 }
 
 export function getInternalLinkTokenState(
@@ -187,7 +187,7 @@ export function pickShortestUniqueInsertTarget(
   selected: InternalLinkPickerItem,
   items: InternalLinkPickerItem[],
 ): string {
-  if (selected.type !== 'note') {
+  if (selected.type === 'snippet') {
     return selected.name
   }
 
@@ -195,7 +195,7 @@ export function pickShortestUniqueInsertTarget(
   const hasNameCollision = items.some(
     candidate =>
       candidate !== selected
-      && candidate.type === 'note'
+      && candidate.type === selected.type
       && normalizeInternalLinkLookupKey(candidate.name) === selectedKey,
   )
 
@@ -230,14 +230,22 @@ function getLocationLabel(entity: SearchableEntity): string {
 }
 
 async function searchItems(query: string): Promise<InternalLinkPickerItem[]> {
-  const [{ data: snippets }, { data: notes }, { data: noteFolders }]
-    = await Promise.all([
-      api.snippets.getSnippets({ search: query, isDeleted: 0 }),
-      api.notes.getNotes({ search: query, isDeleted: 0 }),
-      api.noteFolders.getNoteFolders(),
-    ])
+  const [
+    { data: snippets },
+    { data: notes },
+    { data: noteFolders },
+    { data: httpRequests },
+    { data: httpFolders },
+  ] = await Promise.all([
+    api.snippets.getSnippets({ search: query, isDeleted: 0 }),
+    api.notes.getNotes({ search: query, isDeleted: 0 }),
+    api.noteFolders.getNoteFolders(),
+    api.httpRequests.getHttpRequests({ search: query }),
+    api.httpFolders.getHttpFolders(),
+  ])
 
   const folderPathById = buildNoteFolderPathMap(noteFolders)
+  const httpFolderPathById = buildNoteFolderPathMap(httpFolders)
 
   return [
     ...snippets.map(snippet => ({
@@ -246,6 +254,19 @@ async function searchItems(query: string): Promise<InternalLinkPickerItem[]> {
       name: snippet.name,
       type: 'snippet' as const,
     })),
+    ...httpRequests.map(request => ({
+      folderPath:
+        request.folderId === null
+          ? ''
+          : (httpFolderPathById.get(request.folderId) ?? ''),
+      id: request.id,
+      locationLabel:
+        request.folderId === null
+          ? i18n.t('spaces.http.title')
+          : (httpFolderPathById.get(request.folderId) ?? ''),
+      name: request.name,
+      type: 'http-request' as const,
+    })),
     ...notes.map(note => ({
       folderPath: note.folder ? folderPathById.get(note.folder.id) : undefined,
       id: note.id,
@@ -388,7 +409,14 @@ export function selectInternalLinksPickerItem(index?: number) {
     item,
     internalLinksPickerState.items,
   )
-  const change = buildInternalLinkInsertChange(range, target)
+  const change
+    = item.type === 'http-request'
+      ? {
+          from: range.from,
+          insert: buildLinkMarkdown(`http-request:${item.id}`, item.name),
+          to: range.to,
+        }
+      : buildInternalLinkInsertChange(range, target)
 
   view.dispatch({
     changes: change,
diff --git a/src/renderer/components/notes/theme.ts b/src/renderer/components/notes/theme.ts
index 77a14556..684cb3c3 100644
--- a/src/renderer/components/notes/theme.ts
+++ b/src/renderer/components/notes/theme.ts
@@ -1,5 +1,5 @@
+import { editorScrollbarTheme } from '@/components/cm-extensions/scrollbarTheme'
 import { EditorView } from '@codemirror/view'
-import { notesEditorScrollbarTheme } from './cm-extensions/scrollbarTheme'
 
 export interface NotesEditorThemeSettings {
   fontSize: number
@@ -51,7 +51,7 @@ export function createNotesEditThemeStyles(
       lineHeight: String(notesSettings.lineHeight),
       ...(notesSettings.lineNumbers && raw ? {} : { display: 'none' }),
     },
-    ...notesEditorScrollbarTheme,
+    ...editorScrollbarTheme,
     '&.cm-focused': {
       outline: 'none',
     },
diff --git a/src/renderer/components/preferences/Http.vue b/src/renderer/components/preferences/Http.vue
new file mode 100644
index 00000000..992ba987
--- /dev/null
+++ b/src/renderer/components/preferences/Http.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import * as Select from '@/components/ui/shadcn/select'
+import { Switch } from '@/components/ui/shadcn/switch'
+import { useHttpSettings } from '@/composables'
+import { i18n } from '@/electron'
+
+const { settings } = useHttpSettings()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <UiMenuFormSection :label="i18n.t('preferences:http.label')">
+      <UiMenuFormItem :label="i18n.t('preferences:http.wrapLines.label')">
+        <Switch
+          :checked="settings.wrapLines"
+          @update:checked="settings.wrapLines = $event"
+        />
+        <template #description>
+          {{ i18n.t("preferences:http.wrapLines.description") }}
+        </template>
+      </UiMenuFormItem>
+
+      <UiMenuFormItem
+        :label="i18n.t('preferences:http.defaultPreviewFormat.label')"
+      >
+        <Select.Select v-model="settings.defaultPreviewFormat">
+          <Select.SelectTrigger class="w-64">
+            <Select.SelectValue />
+          </Select.SelectTrigger>
+          <Select.SelectContent>
+            <Select.SelectItem value="http">
+              {{ i18n.t("preferences:http.defaultPreviewFormat.http") }}
+            </Select.SelectItem>
+            <Select.SelectItem value="curl">
+              {{ i18n.t("preferences:http.defaultPreviewFormat.curl") }}
+            </Select.SelectItem>
+          </Select.SelectContent>
+        </Select.Select>
+        <template #description>
+          {{ i18n.t("preferences:http.defaultPreviewFormat.description") }}
+        </template>
+      </UiMenuFormItem>
+
+      <UiMenuFormItem
+        :label="i18n.t('preferences:http.autoSwitchToResponse.label')"
+      >
+        <Switch
+          :checked="settings.autoSwitchToResponse"
+          @update:checked="settings.autoSwitchToResponse = $event"
+        />
+        <template #description>
+          {{ i18n.t("preferences:http.autoSwitchToResponse.description") }}
+        </template>
+      </UiMenuFormItem>
+    </UiMenuFormSection>
+  </div>
+</template>
diff --git a/src/renderer/composables/__tests__/useNavigationHistory.test.ts b/src/renderer/composables/__tests__/useNavigationHistory.test.ts
index 8bffef91..4356e424 100644
--- a/src/renderer/composables/__tests__/useNavigationHistory.test.ts
+++ b/src/renderer/composables/__tests__/useNavigationHistory.test.ts
@@ -9,6 +9,11 @@ describe('useNavigationHistory', () => {
     vi.resetModules()
     vi.clearAllMocks()
     vi.doUnmock('../useNavigationUIState')
+    vi.doMock('../spaces/http/useHttpRequests', () => ({
+      useHttpRequests: () => ({
+        currentRequest: ref(),
+      }),
+    }))
   })
 
   it('records internal target navigation and restores backward and forward', async () => {
@@ -227,6 +232,55 @@ describe('useNavigationHistory', () => {
     expect(history.cursor.value).toBe(1)
   })
 
+  it('records HTTP request targets', async () => {
+    const route = ref({ name: 'http-space' })
+    const selectedNote = ref<{ id: number, name: string }>()
+    const selectedSnippet = ref<{ id: number, name: string }>()
+    const currentRequest = ref({ id: 8, name: 'Create snippet' })
+
+    vi.doMock('@/router', () => ({
+      RouterName: {
+        httpSpace: 'http-space',
+        main: 'main',
+        notesSpace: 'notes-space',
+        notesPresentation: 'notes-space/presentation',
+      },
+      router: {
+        currentRoute: route,
+      },
+    }))
+
+    vi.doMock('../spaces/http/useHttpRequests', () => ({
+      useHttpRequests: () => ({
+        currentRequest,
+      }),
+    }))
+
+    vi.doMock('../spaces/notes/useNotes', () => ({
+      useNotes: () => ({
+        selectedNote,
+      }),
+    }))
+
+    vi.doMock('../useSnippets', () => ({
+      useSnippets: () => ({
+        selectedSnippet,
+      }),
+    }))
+
+    const { useNavigationHistory } = await import('../useNavigationHistory')
+    const history = useNavigationHistory()
+
+    await history.recordNavigation(async () => {
+      currentRequest.value = { id: 9, name: 'Delete snippet' }
+    })
+
+    expect(history.entries.value).toEqual([
+      { id: 8, name: 'Create snippet', type: 'http-request' },
+      { id: 9, name: 'Delete snippet', type: 'http-request' },
+    ])
+  })
+
   it('updates route ui state when recording again from the same dashboard entry', async () => {
     const route = ref({ name: 'notes-space/dashboard' })
     const selectedNote = ref({ id: 1, name: 'Note A' })
diff --git a/src/renderer/composables/index.ts b/src/renderer/composables/index.ts
index a8048a88..4e2c19ee 100644
--- a/src/renderer/composables/index.ts
+++ b/src/renderer/composables/index.ts
@@ -1,4 +1,5 @@
 export * from './math-notebook'
+export * from './spaces/http'
 export * from './spaces/notes'
 export * from './useActivityTracker'
 export * from './useApp'
diff --git a/src/renderer/composables/spaces/http/index.ts b/src/renderer/composables/spaces/http/index.ts
new file mode 100644
index 00000000..e88d60eb
--- /dev/null
+++ b/src/renderer/composables/spaces/http/index.ts
@@ -0,0 +1,16 @@
+export { useHttpApp } from './useHttpApp'
+export type { HttpEnvironment } from './useHttpEnvironments'
+export { useHttpEnvironments } from './useHttpEnvironments'
+export { useHttpExecute } from './useHttpExecute'
+export { useHttpFolderDragDrop } from './useHttpFolderDragDrop'
+export { useHttpFolders } from './useHttpFolders'
+export { useHttpHistory } from './useHttpHistory'
+export type {
+  HttpRequest,
+  HttpRequestDraft,
+  HttpRequestListItem,
+} from './useHttpRequests'
+export { useHttpRequests } from './useHttpRequests'
+export { useHttpSearch } from './useHttpSearch'
+export { useHttpSettings } from './useHttpSettings'
+export { resetHttpSpaceInit, useHttpSpaceInit } from './useHttpSpaceInit'
diff --git a/src/renderer/composables/spaces/http/useHttpApp.ts b/src/renderer/composables/spaces/http/useHttpApp.ts
new file mode 100644
index 00000000..7933c491
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpApp.ts
@@ -0,0 +1,110 @@
+import { store } from '@/electron'
+import {
+  getNextLayoutModeForSidebarToggle,
+  type LayoutMode,
+} from '../../layoutModes'
+
+export interface HttpSpaceState {
+  folderId?: number
+  requestId?: number
+}
+
+export type HttpStateAction = 'beforeSearch'
+
+export interface HttpSavedState {
+  folderId?: number
+  requestId?: number
+}
+
+const httpState = reactive<HttpSpaceState>(
+  (store.app.get('http.selection') as HttpSpaceState) || {},
+)
+
+const stateSnapshots = reactive<Record<HttpStateAction, HttpSavedState>>({
+  beforeSearch: {},
+})
+
+const isHttpSpaceInitialized = ref(false)
+const isFocusedSearch = ref(false)
+
+const highlightedFolderIds = ref<Set<number>>(new Set())
+const highlightedRequestIds = ref<Set<number>>(new Set())
+const focusedFolderId = ref<number | undefined>()
+const focusedRequestId = ref<number | undefined>()
+
+const httpLayoutMode = ref<LayoutMode>(
+  (store.app.get('http.layout.mode') as LayoutMode) || 'all-panels',
+)
+
+const isHttpSidebarHidden = computed({
+  get: () => httpLayoutMode.value !== 'all-panels',
+  set: (value: boolean) => {
+    httpLayoutMode.value = value ? 'list-editor' : 'all-panels'
+  },
+})
+
+const isHttpListHidden = computed({
+  get: () => httpLayoutMode.value === 'editor-only',
+  set: (value: boolean) => {
+    httpLayoutMode.value = value ? 'editor-only' : 'list-editor'
+  },
+})
+
+function saveHttpStateSnapshot(action: HttpStateAction): void {
+  stateSnapshots[action] = {
+    folderId: httpState.folderId,
+    requestId: httpState.requestId,
+  }
+}
+
+function restoreHttpStateSnapshot(action: HttpStateAction): void {
+  const snapshot = stateSnapshots[action]
+  if (!snapshot)
+    return
+
+  if (snapshot.folderId !== undefined)
+    httpState.folderId = snapshot.folderId
+  if (snapshot.requestId !== undefined)
+    httpState.requestId = snapshot.requestId
+}
+
+function setHttpLayoutMode(value: LayoutMode) {
+  httpLayoutMode.value = value
+}
+
+function toggleHttpSidebar() {
+  httpLayoutMode.value = getNextLayoutModeForSidebarToggle(
+    httpLayoutMode.value,
+  )
+}
+
+watch(
+  httpState,
+  () => {
+    store.app.set('http.selection', JSON.parse(JSON.stringify(httpState)))
+  },
+  { deep: true },
+)
+
+watch(httpLayoutMode, (mode) => {
+  store.app.set('http.layout.mode', mode)
+})
+
+export function useHttpApp() {
+  return {
+    httpState,
+    isHttpSpaceInitialized,
+    isFocusedSearch,
+    highlightedFolderIds,
+    highlightedRequestIds,
+    focusedFolderId,
+    focusedRequestId,
+    httpLayoutMode,
+    isHttpSidebarHidden,
+    isHttpListHidden,
+    restoreHttpStateSnapshot,
+    saveHttpStateSnapshot,
+    setHttpLayoutMode,
+    toggleHttpSidebar,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpEnvironments.ts b/src/renderer/composables/spaces/http/useHttpEnvironments.ts
new file mode 100644
index 00000000..471d9b77
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpEnvironments.ts
@@ -0,0 +1,106 @@
+import type {
+  HttpEnvironmentsAdd,
+  HttpEnvironmentsResponse,
+  HttpEnvironmentsUpdate,
+} from '@/services/api/generated'
+import { markPersistedStorageMutation } from '@/composables/useStorageMutation'
+import { api } from '@/services/api'
+
+export type HttpEnvironment = HttpEnvironmentsResponse['items'][number]
+
+const environments = shallowRef<HttpEnvironment[]>([])
+const activeEnvironmentId = ref<number | null>(null)
+
+const activeEnvironment = computed(() => {
+  if (activeEnvironmentId.value === null)
+    return null
+  return (
+    environments.value.find(env => env.id === activeEnvironmentId.value)
+    ?? null
+  )
+})
+
+async function getHttpEnvironments() {
+  try {
+    const { data } = await api.httpEnvironments.getHttpEnvironments()
+    environments.value = data.items
+    activeEnvironmentId.value = data.activeId
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function createHttpEnvironment(payload: HttpEnvironmentsAdd) {
+  try {
+    markPersistedStorageMutation()
+    const { data } = await api.httpEnvironments.postHttpEnvironments(payload)
+    await getHttpEnvironments()
+    return Number(data.id)
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function updateHttpEnvironment(
+  environmentId: number,
+  data: HttpEnvironmentsUpdate,
+) {
+  try {
+    markPersistedStorageMutation()
+    await api.httpEnvironments.patchHttpEnvironmentsById(
+      String(environmentId),
+      data,
+    )
+    await getHttpEnvironments()
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteHttpEnvironment(environmentId: number) {
+  try {
+    markPersistedStorageMutation()
+    await api.httpEnvironments.deleteHttpEnvironmentsById(
+      String(environmentId),
+    )
+    await getHttpEnvironments()
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function setActiveHttpEnvironment(environmentId: number | null) {
+  try {
+    markPersistedStorageMutation()
+    await api.httpEnvironments.postHttpEnvironmentsActive({
+      id: environmentId,
+    })
+    activeEnvironmentId.value = environmentId
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+function resetHttpEnvironmentsState() {
+  environments.value = []
+  activeEnvironmentId.value = null
+}
+
+export function useHttpEnvironments() {
+  return {
+    activeEnvironment,
+    activeEnvironmentId,
+    createHttpEnvironment,
+    deleteHttpEnvironment,
+    environments,
+    getHttpEnvironments,
+    resetHttpEnvironmentsState,
+    setActiveHttpEnvironment,
+    updateHttpEnvironment,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpExecute.ts b/src/renderer/composables/spaces/http/useHttpExecute.ts
new file mode 100644
index 00000000..cccde40f
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpExecute.ts
@@ -0,0 +1,90 @@
+import type {
+  HttpExecutePayload,
+  HttpExecuteRequest,
+  HttpExecuteResult,
+} from '~/main/types/http'
+import { useDonations } from '@/composables/useDonations'
+import { markPersistedStorageMutation } from '@/composables/useStorageMutation'
+import { ipc } from '@/electron'
+import { useHttpEnvironments } from './useHttpEnvironments'
+import { useHttpRequests } from './useHttpRequests'
+
+export type HttpResponse = HttpExecuteResult
+
+const isExecuting = ref(false)
+const lastResponse = shallowRef<HttpResponse | null>(null)
+const lastError = ref<string | null>(null)
+
+const { currentDraft, currentRequest } = useHttpRequests()
+const { activeEnvironmentId } = useHttpEnvironments()
+const { incrementSent } = useDonations()
+
+function buildExecuteRequest(): HttpExecuteRequest | null {
+  const draft = currentDraft.value
+  if (!draft)
+    return null
+
+  return {
+    method: draft.method,
+    url: draft.url,
+    headers: draft.headers.map(h => ({ ...h })),
+    query: draft.query.map(q => ({ ...q })),
+    bodyType: draft.bodyType,
+    body: draft.body,
+    formData: draft.formData.map(f => ({ ...f })),
+    auth: { ...draft.auth },
+  }
+}
+
+async function executeCurrentRequest(): Promise<HttpResponse | null> {
+  const request = buildExecuteRequest()
+  if (!request)
+    return null
+
+  const payload: HttpExecutePayload = {
+    request,
+    requestId: currentRequest.value?.id ?? null,
+    environmentId: activeEnvironmentId.value,
+  }
+
+  isExecuting.value = true
+  lastError.value = null
+
+  try {
+    markPersistedStorageMutation()
+    incrementSent('http')
+    const response = (await ipc.invoke(
+      'spaces:http:execute',
+      payload,
+    )) as HttpResponse
+    lastResponse.value = response
+    if (response.error) {
+      lastError.value = response.error
+    }
+    return response
+  }
+  catch (error) {
+    const message = error instanceof Error ? error.message : String(error)
+    lastError.value = message
+    return null
+  }
+  finally {
+    isExecuting.value = false
+  }
+}
+
+function resetHttpExecuteState() {
+  isExecuting.value = false
+  lastResponse.value = null
+  lastError.value = null
+}
+
+export function useHttpExecute() {
+  return {
+    executeCurrentRequest,
+    isExecuting,
+    lastError,
+    lastResponse,
+    resetHttpExecuteState,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpFolderDragDrop.ts b/src/renderer/composables/spaces/http/useHttpFolderDragDrop.ts
new file mode 100644
index 00000000..8871be50
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpFolderDragDrop.ts
@@ -0,0 +1,123 @@
+import type { TreeNode as TreeNodeType } from '@/components/ui/tree/types'
+import { useHttpFolders } from './useHttpFolders'
+import { useHttpRequests } from './useHttpRequests'
+
+type Position = 'after' | 'before' | 'center'
+
+export function useHttpFolderDragDrop() {
+  const { folders, updateHttpFolder, getFolderByIdFromTree } = useHttpFolders()
+  const { requests, updateHttpRequest, getHttpRequests } = useHttpRequests()
+
+  async function onDragNode({
+    nodes,
+    target,
+    position,
+  }: {
+    nodes: TreeNodeType[]
+    target: TreeNodeType
+    position: Position
+  }) {
+    try {
+      const folderNodes = nodes
+        .map(n => getFolderByIdFromTree(folders.value, Number(n.id)))
+        .filter((n): n is NonNullable<typeof n> => Boolean(n))
+      const folderTarget = getFolderByIdFromTree(
+        folders.value,
+        Number(target.id),
+      )
+
+      if (!folderNodes.length || !folderTarget)
+        return
+
+      const movableNodes = folderNodes.filter(
+        node => node.id !== folderTarget.id,
+      )
+
+      if (!movableNodes.length)
+        return
+
+      if (position === 'center') {
+        const destinationParentId = Number(target.id)
+        let orderIndex = folderTarget.children?.length || 0
+
+        for (const node of movableNodes) {
+          await updateHttpFolder(node.id, {
+            parentId: destinationParentId,
+            orderIndex,
+          })
+          orderIndex += 1
+        }
+
+        return
+      }
+
+      for (const node of movableNodes) {
+        const isDraggingUp = node.orderIndex > folderTarget.orderIndex
+        const newParentId: number | null = folderTarget.parentId || null
+        let newOrderIndex: number
+
+        if (node.parentId === folderTarget.parentId) {
+          if (position === 'after') {
+            newOrderIndex = isDraggingUp
+              ? folderTarget.orderIndex + 1
+              : folderTarget.orderIndex
+          }
+          else {
+            newOrderIndex = isDraggingUp
+              ? folderTarget.orderIndex
+              : Math.max(folderTarget.orderIndex - 1, 0)
+          }
+        }
+        else {
+          newOrderIndex
+            = position === 'after'
+              ? folderTarget.orderIndex + 1
+              : folderTarget.orderIndex
+        }
+
+        await updateHttpFolder(node.id, {
+          parentId: newParentId,
+          orderIndex: newOrderIndex,
+        })
+      }
+    }
+    catch (error) {
+      console.error('HTTP folder drag error:', error)
+    }
+  }
+
+  async function onExternalDrop({
+    data,
+    target,
+  }: {
+    data: DataTransfer
+    target: TreeNodeType
+    position: Position
+  }) {
+    const requestIds = JSON.parse(
+      data.getData('requestIds') || '[]',
+    ) as number[]
+    if (!requestIds.length)
+      return
+
+    const folderId = Number(target.id)
+    const matched = requests.value.filter(r => requestIds.includes(r.id))
+
+    if (!matched.length)
+      return
+
+    if (matched.every(r => r.folderId === folderId))
+      return
+
+    for (const request of matched) {
+      await updateHttpRequest(request.id, { folderId })
+    }
+
+    await getHttpRequests()
+  }
+
+  return {
+    onDragNode,
+    onExternalDrop,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpFolderTree.ts b/src/renderer/composables/spaces/http/useHttpFolderTree.ts
new file mode 100644
index 00000000..6af60dc2
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpFolderTree.ts
@@ -0,0 +1,78 @@
+export interface HttpFolderTreeItem {
+  id: number
+  name: string
+  icon: string | null
+  createdAt: number
+  updatedAt: number
+  parentId: number | null
+  isOpen: number
+  orderIndex: number
+  children: HttpFolderTreeItem[]
+}
+
+export type HttpFoldersTreeResponse = HttpFolderTreeItem[]
+
+function flattenFolderTree(
+  nodes?: HttpFoldersTreeResponse,
+  acc: HttpFolderTreeItem[] = [],
+) {
+  if (!nodes)
+    return acc
+
+  nodes.forEach((folder) => {
+    acc.push(folder)
+
+    if (folder.children?.length) {
+      flattenFolderTree(folder.children, acc)
+    }
+  })
+
+  return acc
+}
+
+function getFolderByIdFromTree(
+  nodes: HttpFolderTreeItem[] | undefined,
+  id: number | null,
+): HttpFolderTreeItem | undefined {
+  if (!nodes || id === null)
+    return undefined
+
+  for (const node of nodes) {
+    if (node.id === id)
+      return node
+
+    if (node.children?.length) {
+      const found = getFolderByIdFromTree(node.children, id)
+      if (found)
+        return found
+    }
+  }
+}
+
+function findParentFolderIds(
+  folderId: number,
+  allFolders: HttpFolderTreeItem[],
+): number[] {
+  const parentIds: number[] = []
+
+  function walk(currentFolderId: number) {
+    const folder = allFolders.find(f => f.id === currentFolderId)
+    if (folder && folder.parentId) {
+      parentIds.push(folder.parentId)
+      walk(folder.parentId)
+    }
+  }
+
+  walk(folderId)
+  return parentIds
+}
+
+export { findParentFolderIds, flattenFolderTree, getFolderByIdFromTree }
+
+export function useHttpFolderTree() {
+  return {
+    flattenFolderTree,
+    getFolderByIdFromTree,
+    findParentFolderIds,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpFolders.ts b/src/renderer/composables/spaces/http/useHttpFolders.ts
new file mode 100644
index 00000000..c1a7bc5c
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpFolders.ts
@@ -0,0 +1,394 @@
+import type {
+  HttpFoldersResponse,
+  HttpFoldersUpdate,
+} from '@/services/api/generated'
+import type { HttpFoldersTreeResponse } from './useHttpFolderTree'
+import { markPersistedStorageMutation } from '@/composables/useStorageMutation'
+import { i18n } from '@/electron'
+import { api } from '@/services/api'
+import { getContiguousSelection } from '@/utils'
+import { useHttpApp } from './useHttpApp'
+import {
+  findParentFolderIds,
+  flattenFolderTree,
+  getFolderByIdFromTree,
+} from './useHttpFolderTree'
+import { useHttpRequests } from './useHttpRequests'
+
+export type HttpFolderItem = HttpFoldersResponse[number]
+
+const folders = shallowRef<HttpFoldersTreeResponse>([])
+
+const renameFolderId = ref<number | null>(null)
+let isApplyingFolderSelection = false
+
+const { httpState } = useHttpApp()
+
+const selectedFolderIds = ref<number[]>(
+  httpState.folderId ? [httpState.folderId] : [],
+)
+const lastSelectedFolderId = ref<number | undefined>(httpState.folderId)
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function getNextIndexedName(baseName: string, existingNames: string[]): string {
+  const normalizedBase = baseName.trim()
+  const indexedNameRe = new RegExp(
+    `^${escapeRegExp(normalizedBase)}(?:\\s+(\\d+))?$`,
+    'i',
+  )
+
+  let maxIndex = 0
+  existingNames.forEach((name) => {
+    const match = name.trim().match(indexedNameRe)
+    if (!match)
+      return
+    const index = match[1] ? Number(match[1]) : 0
+    if (Number.isFinite(index)) {
+      maxIndex = Math.max(maxIndex, index)
+    }
+  })
+  return `${normalizedBase} ${maxIndex + 1}`
+}
+
+function getNextUntitledFolderName(parentId?: number): string {
+  const normalizedParentId = parentId ?? null
+  const siblingNames = flattenFolderTree(folders.value)
+    .filter(folder => (folder.parentId ?? null) === normalizedParentId)
+    .map(folder => folder.name)
+
+  return getNextIndexedName(i18n.t('folder.untitled'), siblingNames)
+}
+
+const flatFolderList = computed(() => flattenFolderTree(folders.value))
+
+const folderOrderMap = computed(() => {
+  const map = new Map<number, number>()
+  flatFolderList.value.forEach((folder, index) => {
+    map.set(folder.id, index)
+  })
+  return map
+})
+
+function sortFolderIdsByTreeOrder(ids: number[]) {
+  const seen = new Set<number>()
+
+  return ids
+    .filter((id) => {
+      if (seen.has(id))
+        return false
+      seen.add(id)
+      return folderOrderMap.value.has(id)
+    })
+    .sort((a, b) => {
+      const orderA = folderOrderMap.value.get(a) ?? Number.MAX_SAFE_INTEGER
+      const orderB = folderOrderMap.value.get(b) ?? Number.MAX_SAFE_INTEGER
+      return orderA - orderB
+    })
+}
+
+function syncSelectedFoldersWithTree() {
+  const orderedIds = flatFolderList.value.map(folder => folder.id)
+
+  if (!orderedIds.length) {
+    clearFolderSelection()
+    return
+  }
+
+  const filteredSelection = selectedFolderIds.value.filter(id =>
+    folderOrderMap.value.has(id),
+  )
+
+  if (!filteredSelection.length) {
+    const fallbackId
+      = httpState.folderId && folderOrderMap.value.has(httpState.folderId)
+        ? httpState.folderId
+        : orderedIds[0]
+
+    if (fallbackId) {
+      setFolderSelection([fallbackId])
+    }
+    else {
+      clearFolderSelection()
+    }
+    return
+  }
+
+  setFolderSelection(filteredSelection)
+}
+
+watch(
+  () => httpState.folderId,
+  (folderId) => {
+    if (isApplyingFolderSelection)
+      return
+
+    if (folderId === undefined) {
+      selectedFolderIds.value = []
+      lastSelectedFolderId.value = undefined
+      return
+    }
+
+    if (selectedFolderIds.value.includes(folderId))
+      return
+
+    selectedFolderIds.value = [folderId]
+    lastSelectedFolderId.value = folderId
+  },
+)
+
+function clearFolderSelection() {
+  isApplyingFolderSelection = true
+  selectedFolderIds.value = []
+  httpState.folderId = undefined
+  httpState.requestId = undefined
+  lastSelectedFolderId.value = undefined
+  isApplyingFolderSelection = false
+}
+
+function setFolderSelection(ids: number[]) {
+  if (!ids.length) {
+    clearFolderSelection()
+    return
+  }
+
+  const orderedSelection = sortFolderIdsByTreeOrder(ids)
+  isApplyingFolderSelection = true
+  selectedFolderIds.value = orderedSelection
+  httpState.folderId = orderedSelection[0]
+  lastSelectedFolderId.value = orderedSelection[orderedSelection.length - 1]
+  isApplyingFolderSelection = false
+}
+
+function applySingleFolderSelection(folderId: number) {
+  isApplyingFolderSelection = true
+  selectedFolderIds.value = [folderId]
+  httpState.folderId = folderId
+  lastSelectedFolderId.value = folderId
+  isApplyingFolderSelection = false
+}
+
+function applyRangeFolderSelection(folderId: number) {
+  const orderedIds = flatFolderList.value.map(folder => folder.id)
+
+  if (!orderedIds.length) {
+    applySingleFolderSelection(folderId)
+    return
+  }
+
+  const anchorId = httpState.folderId ?? selectedFolderIds.value[0] ?? folderId
+  const rangeSelection = getContiguousSelection(orderedIds, anchorId, folderId)
+
+  if (!rangeSelection.length) {
+    applySingleFolderSelection(folderId)
+    return
+  }
+
+  isApplyingFolderSelection = true
+  selectedFolderIds.value = rangeSelection
+  lastSelectedFolderId.value = folderId
+  isApplyingFolderSelection = false
+}
+
+function applyToggleFolderSelection(folderId: number) {
+  if (selectedFolderIds.value.includes(folderId)) {
+    if (selectedFolderIds.value.length === 1)
+      return
+
+    isApplyingFolderSelection = true
+    selectedFolderIds.value = selectedFolderIds.value.filter(
+      id => id !== folderId,
+    )
+    httpState.folderId = selectedFolderIds.value[0]
+    lastSelectedFolderId.value
+      = selectedFolderIds.value[selectedFolderIds.value.length - 1]
+    isApplyingFolderSelection = false
+    return
+  }
+
+  isApplyingFolderSelection = true
+  selectedFolderIds.value = sortFolderIdsByTreeOrder([
+    ...selectedFolderIds.value,
+    folderId,
+  ])
+  httpState.folderId = folderId
+  lastSelectedFolderId.value = folderId
+  isApplyingFolderSelection = false
+}
+
+async function ensureSelectedFolderIsVisible() {
+  if (!httpState.folderId || !folders.value.length)
+    return
+
+  const parentIds = findParentFolderIds(
+    httpState.folderId,
+    flatFolderList.value,
+  )
+
+  if (parentIds.length === 0)
+    return
+
+  const foldersToOpen = parentIds.filter((parentId) => {
+    const folder = flatFolderList.value.find(f => f.id === parentId)
+    return folder && folder.isOpen === 0
+  })
+
+  if (foldersToOpen.length === 0)
+    return
+
+  try {
+    await Promise.allSettled(
+      foldersToOpen.map(folderId =>
+        api.httpFolders.patchHttpFoldersById(String(folderId), {
+          isOpen: 1,
+        }),
+      ),
+    )
+    await getHttpFolders(false)
+  }
+  catch (error) {
+    console.error('Error while opening parent http folders:', error)
+  }
+}
+
+async function getHttpFolders(shouldEnsureVisibility = true) {
+  try {
+    const { data } = await api.httpFolders.getHttpFoldersTree()
+    folders.value = data as HttpFoldersTreeResponse
+    syncSelectedFoldersWithTree()
+
+    if (shouldEnsureVisibility) {
+      await ensureSelectedFolderIsVisible()
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function createHttpFolder(parentId?: number) {
+  try {
+    const name = getNextUntitledFolderName(parentId)
+    markPersistedStorageMutation()
+    const { data } = await api.httpFolders.postHttpFolders({
+      name,
+      ...(parentId !== undefined && { parentId }),
+    })
+
+    if (parentId) {
+      await updateHttpFolder(parentId, { isOpen: 1 })
+    }
+
+    await getHttpFolders(false)
+
+    return Number(data.id)
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function createHttpFolderAndSelect(parentId?: number) {
+  const id = await createHttpFolder(parentId)
+  if (id) {
+    await selectHttpFolder(id)
+    renameFolderId.value = id
+  }
+}
+
+async function updateHttpFolder(folderId: number, data: HttpFoldersUpdate) {
+  try {
+    markPersistedStorageMutation()
+    await api.httpFolders.patchHttpFoldersById(String(folderId), data)
+    await getHttpFolders(false)
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteHttpFolder(folderId: number, shouldRefresh = true) {
+  try {
+    const { currentRequest, getHttpRequests, requests, selectHttpRequest }
+      = useHttpRequests()
+    const selectedRequestId = currentRequest.value?.id
+
+    markPersistedStorageMutation()
+    await api.httpFolders.deleteHttpFoldersById(String(folderId))
+
+    if (httpState.folderId === folderId) {
+      httpState.folderId = undefined
+    }
+
+    await getHttpRequests()
+
+    if (
+      selectedRequestId !== undefined
+      && !requests.value.some(request => request.id === selectedRequestId)
+    ) {
+      selectHttpRequest(undefined)
+    }
+
+    if (shouldRefresh) {
+      await getHttpFolders(false)
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+interface SelectFolderOptions {
+  mode?: 'single' | 'range' | 'toggle'
+  ensureVisibility?: boolean
+}
+
+async function selectHttpFolder(
+  folderId: number,
+  options: SelectFolderOptions = {},
+) {
+  const mode = options.mode ?? 'single'
+  const shouldEnsureVisibility = options.ensureVisibility ?? mode === 'single'
+
+  if (mode === 'range') {
+    applyRangeFolderSelection(folderId)
+  }
+  else if (mode === 'toggle') {
+    applyToggleFolderSelection(folderId)
+  }
+  else {
+    applySingleFolderSelection(folderId)
+    httpState.requestId = undefined
+  }
+
+  if (folders.value.length && shouldEnsureVisibility) {
+    await ensureSelectedFolderIsVisible()
+  }
+}
+
+function resetHttpFoldersState() {
+  folders.value = []
+  renameFolderId.value = null
+  clearFolderSelection()
+}
+
+export function useHttpFolders() {
+  return {
+    clearFolderSelection,
+    createHttpFolder,
+    createHttpFolderAndSelect,
+    deleteHttpFolder,
+    folders,
+    getFolderByIdFromTree,
+    getHttpFolders,
+    lastSelectedFolderId,
+    renameFolderId,
+    resetHttpFoldersState,
+    selectedFolderIds,
+    selectHttpFolder,
+    setFolderSelection,
+    updateHttpFolder,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpHistory.ts b/src/renderer/composables/spaces/http/useHttpHistory.ts
new file mode 100644
index 00000000..3c69bcb8
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpHistory.ts
@@ -0,0 +1,41 @@
+import type { HttpHistoryResponse } from '@/services/api/generated'
+import { markPersistedStorageMutation } from '@/composables/useStorageMutation'
+import { api } from '@/services/api'
+
+export type HttpHistoryItem = HttpHistoryResponse[number]
+
+const history = shallowRef<HttpHistoryResponse>([])
+
+async function getHttpHistory() {
+  try {
+    const { data } = await api.httpHistory.getHttpHistory()
+    history.value = data
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function clearHttpHistory() {
+  try {
+    markPersistedStorageMutation()
+    await api.httpHistory.deleteHttpHistory()
+    history.value = []
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+function resetHttpHistoryState() {
+  history.value = []
+}
+
+export function useHttpHistory() {
+  return {
+    clearHttpHistory,
+    getHttpHistory,
+    history,
+    resetHttpHistoryState,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpRequests.ts b/src/renderer/composables/spaces/http/useHttpRequests.ts
new file mode 100644
index 00000000..ef63d2f3
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpRequests.ts
@@ -0,0 +1,530 @@
+import type {
+  HttpRequestItemResponse,
+  HttpRequestsAdd,
+  HttpRequestsResponse,
+  HttpRequestsUpdate,
+} from '@/services/api/generated'
+import { useDonations } from '@/composables/useDonations'
+import {
+  markPersistedStorageMutation,
+  markUserEdit,
+} from '@/composables/useStorageMutation'
+import { i18n } from '@/electron'
+import { api } from '@/services/api'
+import { getContiguousSelection } from '@/utils'
+import { useDebounceFn } from '@vueuse/core'
+import { getEntryNameValidationIssue } from '~/shared/entryNameValidation'
+import { useHttpApp } from './useHttpApp'
+import { isSearch, requestsBySearch, searchQuery } from './useHttpSearch'
+
+const AUTO_SAVE_DEBOUNCE_MS = 500
+
+export type HttpRequestListItem = HttpRequestsResponse[number]
+export type HttpRequest = HttpRequestItemResponse
+
+export type HttpRequestDraft = Pick<
+  HttpRequest,
+  | 'name'
+  | 'folderId'
+  | 'method'
+  | 'url'
+  | 'headers'
+  | 'query'
+  | 'bodyType'
+  | 'body'
+  | 'formData'
+  | 'auth'
+  | 'description'
+>
+
+export const requests = shallowRef<HttpRequestsResponse>([])
+export const isRestoreStateBlocked = ref(false)
+const currentRequest = shallowRef<HttpRequest | null>(null)
+const currentDraft = ref<HttpRequestDraft | null>(null)
+
+const { httpState } = useHttpApp()
+const { incrementCreated } = useDonations()
+
+const selectedRequestIds = ref<number[]>(
+  httpState.requestId ? [httpState.requestId] : [],
+)
+const lastSelectedRequestId = ref<number | undefined>(httpState.requestId)
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
+function getNextIndexedName(baseName: string, existingNames: string[]): string {
+  const normalizedBase = baseName.trim()
+  const indexedNameRe = new RegExp(
+    `^${escapeRegExp(normalizedBase)}(?:\\s+(\\d+))?$`,
+    'i',
+  )
+
+  let maxIndex = 0
+  existingNames.forEach((name) => {
+    const match = name.trim().match(indexedNameRe)
+    if (!match)
+      return
+    const index = match[1] ? Number(match[1]) : 0
+    if (Number.isFinite(index)) {
+      maxIndex = Math.max(maxIndex, index)
+    }
+  })
+  return `${normalizedBase} ${maxIndex + 1}`
+}
+
+function getNextUntitledRequestName(folderId: number | null): string {
+  const siblingNames = requests.value
+    .filter(request => (request.folderId ?? null) === folderId)
+    .map(request => request.name)
+
+  return getNextIndexedName(
+    i18n.t('spaces.http.untitledRequest'),
+    siblingNames,
+  )
+}
+
+type HttpQueryItem = HttpRequestDraft['query'][number]
+
+function splitUrl(url: string): {
+  path: string
+  query: string
+  fragment: string
+} {
+  const hashIdx = url.indexOf('#')
+  const fragment = hashIdx === -1 ? '' : url.slice(hashIdx)
+  const beforeHash = hashIdx === -1 ? url : url.slice(0, hashIdx)
+  const qIdx = beforeHash.indexOf('?')
+  const path = qIdx === -1 ? beforeHash : beforeHash.slice(0, qIdx)
+  const query = qIdx === -1 ? '' : beforeHash.slice(qIdx + 1)
+  return { path, query, fragment }
+}
+
+function combineUrl(parts: {
+  path: string
+  query: string
+  fragment: string
+}): string {
+  return (
+    parts.path + (parts.query ? `?${parts.query}` : '') + (parts.fragment || '')
+  )
+}
+
+function parseQueryString(qs: string): Array<{ key: string, value: string }> {
+  if (!qs)
+    return []
+  return qs.split('&').map((part) => {
+    const eqIdx = part.indexOf('=')
+    if (eqIdx === -1)
+      return { key: part, value: '' }
+    return { key: part.slice(0, eqIdx), value: part.slice(eqIdx + 1) }
+  })
+}
+
+function buildQueryString(query: HttpQueryItem[]): string {
+  const enabled = query.filter(q => q.enabled !== false && q.key)
+  if (!enabled.length)
+    return ''
+  return enabled.map(q => `${q.key}=${q.value}`).join('&')
+}
+
+function applyQueryToUrl(url: string, query: HttpQueryItem[]): string {
+  const parts = splitUrl(url)
+  return combineUrl({ ...parts, query: buildQueryString(query) })
+}
+
+function applyUrlToQuery(
+  url: string,
+  existingQuery: HttpQueryItem[],
+): HttpQueryItem[] {
+  const parsed = parseQueryString(splitUrl(url).query)
+  const enabledExisting = existingQuery.filter(q => q.enabled !== false)
+  const disabledExisting = existingQuery.filter(q => q.enabled === false)
+
+  const next: HttpQueryItem[] = parsed.map((p, i) => {
+    const matched = enabledExisting[i]
+    return {
+      key: p.key,
+      value: p.value,
+      description: matched?.description ?? '',
+      enabled: true,
+    }
+  })
+
+  return [...next, ...disabledExisting]
+}
+
+function toDraft(request: HttpRequest): HttpRequestDraft {
+  return {
+    name: request.name,
+    folderId: request.folderId,
+    method: request.method,
+    url: request.url,
+    headers: request.headers.map(h => ({ ...h })),
+    query: request.query.map(q => ({ ...q })),
+    bodyType: request.bodyType,
+    body: request.body,
+    formData: request.formData.map(f => ({ ...f })),
+    auth: { ...request.auth },
+    description: request.description,
+  }
+}
+
+let skipUrlWatch = false
+let skipQueryWatch = false
+
+function assignDraft(request: HttpRequest | null) {
+  skipUrlWatch = true
+  skipQueryWatch = true
+  currentRequest.value = request
+  currentDraft.value = request ? toDraft(request) : null
+}
+
+const isCurrentRequestDirty = computed(() => {
+  if (!currentRequest.value || !currentDraft.value)
+    return false
+  return (
+    JSON.stringify(toDraft(currentRequest.value))
+    !== JSON.stringify(currentDraft.value)
+  )
+})
+
+export async function getHttpRequests(query?: { search?: string }) {
+  try {
+    const { data } = await api.httpRequests.getHttpRequests(query)
+    if (query?.search) {
+      requestsBySearch.value = data
+    }
+    else {
+      requests.value = data
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function refreshHttpRequests() {
+  if (isSearch.value && searchQuery.value) {
+    await getHttpRequests({ search: searchQuery.value })
+  }
+  else {
+    await getHttpRequests()
+  }
+}
+
+function findHttpRequestById(requestId: number): HttpRequest | null {
+  return (
+    requestsBySearch.value?.find(r => r.id === requestId)
+    ?? requests.value.find(r => r.id === requestId)
+    ?? null
+  )
+}
+
+async function createHttpRequest(payload?: Partial<HttpRequestsAdd>) {
+  try {
+    const folderId = payload?.folderId ?? null
+    const name = payload?.name?.trim() || getNextUntitledRequestName(folderId)
+
+    markPersistedStorageMutation()
+    const { data } = await api.httpRequests.postHttpRequests({
+      name,
+      folderId,
+      ...(payload?.method && { method: payload.method }),
+      ...(payload?.url !== undefined && { url: payload.url }),
+    })
+
+    incrementCreated('http')
+    await refreshHttpRequests()
+
+    return Number(data.id)
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function createHttpRequestAndSelect(payload?: Partial<HttpRequestsAdd>) {
+  const id = await createHttpRequest(payload)
+  if (id) {
+    selectHttpRequest(id)
+  }
+}
+
+async function duplicateHttpRequest(requestId: number) {
+  const source = findHttpRequestById(requestId)
+  if (!source) {
+    return
+  }
+
+  try {
+    const folderId = source.folderId ?? null
+    const siblingNames = requests.value
+      .filter(request => (request.folderId ?? null) === folderId)
+      .map(request => request.name)
+    const copyBaseName = `${source.name} - copy`
+    const name = siblingNames.some(
+      sibling => sibling.toLowerCase() === copyBaseName.toLowerCase(),
+    )
+      ? getNextIndexedName(copyBaseName, siblingNames)
+      : copyBaseName
+
+    markPersistedStorageMutation()
+    const { data } = await api.httpRequests.postHttpRequests({
+      folderId,
+      method: source.method,
+      name,
+      url: source.url,
+    })
+    const id = Number(data.id)
+
+    await api.httpRequests.patchHttpRequestsById(String(id), {
+      auth: { ...source.auth },
+      body: source.body,
+      bodyType: source.bodyType,
+      description: source.description,
+      formData: source.formData.map(entry => ({ ...entry })),
+      headers: source.headers.map(entry => ({ ...entry })),
+      query: source.query.map(entry => ({ ...entry })),
+    })
+
+    await refreshHttpRequests()
+
+    return id
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function updateHttpRequest(requestId: number, data: HttpRequestsUpdate) {
+  try {
+    markPersistedStorageMutation()
+    await api.httpRequests.patchHttpRequestsById(String(requestId), data)
+    await refreshHttpRequests()
+    if (currentRequest.value?.id === requestId) {
+      const fresh = findHttpRequestById(requestId)
+      if (fresh)
+        currentRequest.value = fresh
+    }
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+async function deleteHttpRequest(requestId: number) {
+  try {
+    markPersistedStorageMutation()
+    await api.httpRequests.deleteHttpRequestsById(String(requestId))
+    if (httpState.requestId === requestId) {
+      httpState.requestId = undefined
+      assignDraft(null)
+    }
+    await refreshHttpRequests()
+  }
+  catch (error) {
+    console.error(error)
+  }
+}
+
+export function selectFirstRequest(options?: { folderId?: number | null }) {
+  const source = isSearch.value ? requestsBySearch.value || [] : requests.value
+  const filteredSource = options
+    ? source.filter(
+        request => (request.folderId ?? null) === (options.folderId ?? null),
+      )
+    : source
+  const first = filteredSource?.[0]
+
+  if (first) {
+    selectHttpRequest(first.id)
+  }
+  else {
+    httpState.requestId = undefined
+    selectedRequestIds.value = []
+    lastSelectedRequestId.value = undefined
+    assignDraft(null)
+  }
+}
+
+export function selectHttpRequest(
+  requestId: number | undefined,
+  withShift = false,
+) {
+  if (requestId === undefined) {
+    httpState.requestId = undefined
+    selectedRequestIds.value = []
+    lastSelectedRequestId.value = undefined
+    assignDraft(null)
+    return
+  }
+
+  if (withShift && httpState.requestId !== undefined && requests.value.length) {
+    const orderedIds = requests.value.map(r => r.id)
+    const rangeSelection = getContiguousSelection(
+      orderedIds,
+      httpState.requestId,
+      requestId,
+    )
+
+    if (rangeSelection.length) {
+      selectedRequestIds.value = rangeSelection
+      lastSelectedRequestId.value = requestId
+      return
+    }
+  }
+
+  selectedRequestIds.value = [requestId]
+  lastSelectedRequestId.value = requestId
+  httpState.requestId = requestId
+
+  assignDraft(findHttpRequestById(requestId))
+}
+
+function hasSiblingRequestNameConflict(
+  name: string,
+  excludeId: number,
+  folderId: number | null,
+): boolean {
+  const normalized = name.trim().toLowerCase()
+  if (!normalized)
+    return false
+  return requests.value.some(
+    request =>
+      request.id !== excludeId
+      && (request.folderId ?? null) === (folderId ?? null)
+      && request.name.toLowerCase() === normalized,
+  )
+}
+
+async function saveCurrentRequest() {
+  if (!currentRequest.value || !currentDraft.value)
+    return
+  if (!isCurrentRequestDirty.value)
+    return
+
+  const draft = currentDraft.value
+  if (getEntryNameValidationIssue(draft.name))
+    return
+  if (
+    hasSiblingRequestNameConflict(
+      draft.name,
+      currentRequest.value.id,
+      draft.folderId,
+    )
+  ) {
+    return
+  }
+
+  const update: HttpRequestsUpdate = {
+    name: draft.name,
+    folderId: draft.folderId,
+    method: draft.method,
+    url: draft.url,
+    headers: draft.headers,
+    query: draft.query,
+    bodyType: draft.bodyType,
+    body: draft.body,
+    formData: draft.formData,
+    auth: draft.auth,
+    description: draft.description,
+  }
+
+  await updateHttpRequest(currentRequest.value.id, update)
+}
+
+function discardCurrentRequestChanges() {
+  if (!currentRequest.value)
+    return
+  skipUrlWatch = true
+  skipQueryWatch = true
+  currentDraft.value = toDraft(currentRequest.value)
+}
+
+const autoSaveDebounced = useDebounceFn(() => {
+  void saveCurrentRequest()
+}, AUTO_SAVE_DEBOUNCE_MS)
+
+watch(
+  () => currentDraft.value?.url,
+  () => {
+    if (skipUrlWatch) {
+      skipUrlWatch = false
+      return
+    }
+    const draft = currentDraft.value
+    if (!draft)
+      return
+    const next = applyUrlToQuery(draft.url, draft.query)
+    if (JSON.stringify(next) !== JSON.stringify(draft.query)) {
+      skipQueryWatch = true
+      draft.query = next
+    }
+  },
+)
+
+watch(
+  () => currentDraft.value?.query,
+  () => {
+    if (skipQueryWatch) {
+      skipQueryWatch = false
+      return
+    }
+    const draft = currentDraft.value
+    if (!draft)
+      return
+    const next = applyQueryToUrl(draft.url, draft.query)
+    if (next !== draft.url) {
+      skipUrlWatch = true
+      draft.url = next
+    }
+  },
+  { deep: true },
+)
+
+watch(
+  currentDraft,
+  () => {
+    if (!isCurrentRequestDirty.value)
+      return
+    markUserEdit()
+    autoSaveDebounced()
+  },
+  { deep: true },
+)
+
+function resetHttpRequestsState() {
+  requests.value = []
+  requestsBySearch.value = undefined
+  currentRequest.value = null
+  currentDraft.value = null
+  selectedRequestIds.value = []
+  lastSelectedRequestId.value = undefined
+  httpState.requestId = undefined
+}
+
+export function useHttpRequests() {
+  return {
+    createHttpRequest,
+    createHttpRequestAndSelect,
+    currentDraft,
+    currentRequest,
+    deleteHttpRequest,
+    duplicateHttpRequest,
+    discardCurrentRequestChanges,
+    getHttpRequests,
+    hasSiblingRequestNameConflict,
+    isCurrentRequestDirty,
+    isRestoreStateBlocked,
+    lastSelectedRequestId,
+    requests,
+    resetHttpRequestsState,
+    saveCurrentRequest,
+    selectedRequestIds,
+    selectFirstRequest,
+    selectHttpRequest,
+    updateHttpRequest,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpSearch.ts b/src/renderer/composables/spaces/http/useHttpSearch.ts
new file mode 100644
index 00000000..e2c5e6ad
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpSearch.ts
@@ -0,0 +1,91 @@
+import type { HttpRequestListItem } from './useHttpRequests'
+import { useHttpApp } from './useHttpApp'
+import {
+  getHttpRequests,
+  isRestoreStateBlocked,
+  requests,
+  selectFirstRequest,
+  selectHttpRequest,
+} from './useHttpRequests'
+
+const { httpState, saveHttpStateSnapshot, restoreHttpStateSnapshot }
+  = useHttpApp()
+
+// --- Module-level state ---
+
+export const requestsBySearch = shallowRef<HttpRequestListItem[]>()
+export const isSearch = ref(false)
+export const searchQuery = ref('')
+const searchSelectedIndex = ref<number>(-1)
+
+// --- Computed ---
+
+const displayedRequests = computed(() => {
+  if (isSearch.value) {
+    return requestsBySearch.value
+  }
+
+  return requests.value
+})
+
+// --- Search ---
+
+async function search() {
+  if (searchQuery.value) {
+    if (!isSearch.value) {
+      saveHttpStateSnapshot('beforeSearch')
+    }
+
+    isSearch.value = true
+    isRestoreStateBlocked.value = false
+
+    await getHttpRequests({ search: searchQuery.value })
+    selectFirstRequest()
+    searchSelectedIndex.value = 0
+  }
+  else {
+    isSearch.value = false
+  }
+}
+
+function selectSearchRequest(index: number) {
+  if (
+    !displayedRequests.value
+    || index < 0
+    || index >= displayedRequests.value.length
+  ) {
+    return
+  }
+
+  const request = displayedRequests.value[index]
+  selectHttpRequest(request.id)
+  searchSelectedIndex.value = index
+}
+
+function clearSearch(restoreState = false) {
+  const shouldRestore = restoreState && !isRestoreStateBlocked.value
+
+  if (shouldRestore) {
+    restoreHttpStateSnapshot('beforeSearch')
+  }
+
+  searchQuery.value = ''
+  isSearch.value = false
+  searchSelectedIndex.value = -1
+
+  if (shouldRestore) {
+    selectHttpRequest(httpState.requestId)
+  }
+}
+
+export function useHttpSearch() {
+  return {
+    clearSearch,
+    displayedRequests,
+    isSearch,
+    search,
+    searchQuery,
+    searchSelectedIndex,
+    selectSearchRequest,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpSettings.ts b/src/renderer/composables/spaces/http/useHttpSettings.ts
new file mode 100644
index 00000000..21a00fba
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpSettings.ts
@@ -0,0 +1,18 @@
+import type { HttpSettings } from '~/main/store/types'
+import { store } from '@/electron'
+
+const settings = reactive(store.preferences.get('http') as HttpSettings)
+
+watch(
+  settings,
+  () => {
+    store.preferences.set('http', JSON.parse(JSON.stringify(settings)))
+  },
+  { deep: true },
+)
+
+export function useHttpSettings() {
+  return {
+    settings,
+  }
+}
diff --git a/src/renderer/composables/spaces/http/useHttpSpaceInit.ts b/src/renderer/composables/spaces/http/useHttpSpaceInit.ts
new file mode 100644
index 00000000..dade9d49
--- /dev/null
+++ b/src/renderer/composables/spaces/http/useHttpSpaceInit.ts
@@ -0,0 +1,62 @@
+import { useHttpApp } from './useHttpApp'
+import { useHttpEnvironments } from './useHttpEnvironments'
+import { useHttpFolders } from './useHttpFolders'
+import { useHttpHistory } from './useHttpHistory'
+import { useHttpRequests } from './useHttpRequests'
+
+const { httpState, isHttpSpaceInitialized } = useHttpApp()
+const { getHttpFolders } = useHttpFolders()
+const { getHttpRequests, requests, selectHttpRequest } = useHttpRequests()
+const { getHttpEnvironments } = useHttpEnvironments()
+const { getHttpHistory } = useHttpHistory()
+
+export function resetHttpSpaceInit() {
+  isHttpSpaceInitialized.value = false
+}
+
+async function initHttpSpace() {
+  if (isHttpSpaceInitialized.value)
+    return
+
+  await refreshHttpSpaceFromDisk()
+}
+
+async function refreshHttpSpaceFromDisk() {
+  const selectedRequestId = httpState.requestId
+  const results = await Promise.allSettled([
+    getHttpFolders(),
+    getHttpRequests(),
+    getHttpEnvironments(),
+    getHttpHistory(),
+  ])
+
+  results.forEach((result) => {
+    if (result.status === 'rejected') {
+      console.error('HTTP space init error:', result.reason)
+    }
+  })
+
+  isHttpSpaceInitialized.value = results.every(
+    result => result.status === 'fulfilled',
+  )
+
+  const persistedRequestId = selectedRequestId ?? httpState.requestId
+  if (
+    persistedRequestId !== undefined
+    && requests.value.some(r => r.id === persistedRequestId)
+  ) {
+    selectHttpRequest(persistedRequestId)
+    return
+  }
+
+  if (persistedRequestId !== undefined) {
+    selectHttpRequest(undefined)
+  }
+}
+
+export function useHttpSpaceInit() {
+  return {
+    initHttpSpace,
+    refreshHttpSpaceFromDisk,
+  }
+}
diff --git a/src/renderer/composables/useDonationTriggers.ts b/src/renderer/composables/useDonationTriggers.ts
index b8adc34e..e9d44abd 100644
--- a/src/renderer/composables/useDonationTriggers.ts
+++ b/src/renderer/composables/useDonationTriggers.ts
@@ -4,12 +4,16 @@ import { useDonations } from '@/composables/useDonations'
 import { i18n } from '@/electron'
 import { toast } from 'vue-sonner'
 
+type CopySpace = SpaceId
 type CreatedSpace = Exclude<SpaceId, 'tools'>
+type SentSpace = Extract<SpaceId, 'http'>
 
 const COPY_INTERVAL = 25
 const CREATED_INTERVAL = 25
-const COPY_SPACES: SpaceId[] = ['code', 'notes', 'math', 'tools']
-const CREATED_SPACES: CreatedSpace[] = ['code', 'notes', 'math']
+const SENT_INTERVAL = 25
+const COPY_SPACES: CopySpace[] = ['code', 'http', 'notes', 'math', 'tools']
+const CREATED_SPACES: CreatedSpace[] = ['code', 'http', 'notes', 'math']
+const SENT_SPACES: SentSpace[] = ['http']
 const STREAK_MILESTONES = [7, 30, 100] as const
 
 function getIntervalMilestone(total: number, interval: number): number | null {
@@ -37,6 +41,7 @@ export function useDonationTriggers() {
     today,
     markCopyMilestoneShown,
     markCreatedMilestoneShown,
+    markSentMilestoneShown,
     markStreakMilestoneShown,
     setGreetingDay,
   } = useDonations()
@@ -116,6 +121,33 @@ export function useDonationTriggers() {
     )
   })
 
+  SENT_SPACES.forEach((space) => {
+    watch(
+      () => donations.sent[space],
+      (count) => {
+        const milestone = getIntervalMilestone(count, SENT_INTERVAL)
+        if (
+          milestone === null
+          || milestone <= donations.lastShownSentMilestones[space]
+        ) {
+          return
+        }
+
+        markSentMilestoneShown(space, milestone)
+
+        if (isToastVisible.value) {
+          return
+        }
+
+        showToast(
+          i18n.t(`messages:donations.trigger.sent.${space}`, {
+            count: milestone,
+          }),
+        )
+      },
+    )
+  })
+
   watch(
     () => donations.currentStreak,
     (streak) => {
diff --git a/src/renderer/composables/useDonations.ts b/src/renderer/composables/useDonations.ts
index 54289f7a..c2c28aac 100644
--- a/src/renderer/composables/useDonations.ts
+++ b/src/renderer/composables/useDonations.ts
@@ -2,7 +2,9 @@ import type { DonationsState, SpaceId } from '~/main/store/types'
 import { store } from '@/electron'
 import { format } from 'date-fns'
 
+type CopySpace = SpaceId
 type CreatedSpace = Exclude<SpaceId, 'tools'>
+type SentSpace = Extract<SpaceId, 'http'>
 
 const initial = store.app.get<DonationsState>('donations')
 
@@ -25,7 +27,7 @@ function dayDiff(a: string, b: string) {
   return Math.round(ms / (1000 * 60 * 60 * 24))
 }
 
-function incrementCopy(space: SpaceId) {
+function incrementCopy(space: CopySpace) {
   state.copies[space] += 1
   markActiveDay()
 }
@@ -35,6 +37,11 @@ function incrementCreated(space: CreatedSpace) {
   markActiveDay()
 }
 
+function incrementSent(space: SentSpace) {
+  state.sent[space] += 1
+  markActiveDay()
+}
+
 function markActiveDay() {
   const now = today()
 
@@ -53,7 +60,7 @@ function markActiveDay() {
   state.lastActiveDay = now
 }
 
-function markCopyMilestoneShown(space: SpaceId, milestone: number) {
+function markCopyMilestoneShown(space: CopySpace, milestone: number) {
   state.lastShownCopyMilestones[space] = milestone
 }
 
@@ -61,6 +68,10 @@ function markCreatedMilestoneShown(space: CreatedSpace, milestone: number) {
   state.lastShownCreatedMilestones[space] = milestone
 }
 
+function markSentMilestoneShown(space: SentSpace, milestone: number) {
+  state.lastShownSentMilestones[space] = milestone
+}
+
 function markStreakMilestoneShown(milestone: number) {
   if (!state.shownStreakMilestones.includes(milestone)) {
     state.shownStreakMilestones.push(milestone)
@@ -77,9 +88,11 @@ export function useDonations() {
     today,
     incrementCopy,
     incrementCreated,
+    incrementSent,
     markActiveDay,
     markCopyMilestoneShown,
     markCreatedMilestoneShown,
+    markSentMilestoneShown,
     markStreakMilestoneShown,
     setGreetingDay,
   }
diff --git a/src/renderer/composables/useNavigationHistory.ts b/src/renderer/composables/useNavigationHistory.ts
index d843128e..7d5674cd 100644
--- a/src/renderer/composables/useNavigationHistory.ts
+++ b/src/renderer/composables/useNavigationHistory.ts
@@ -1,4 +1,5 @@
 import { router, RouterName } from '@/router'
+import { useHttpRequests } from './spaces/http/useHttpRequests'
 import { useNotes } from './spaces/notes/useNotes'
 import {
   captureNavigationUIState,
@@ -15,7 +16,7 @@ export interface NavigationHistoryRouteEntry {
 export interface NavigationHistoryEntityEntry {
   id: number
   name: string
-  type: 'note' | 'snippet'
+  type: 'note' | 'snippet' | 'http-request'
   uiState?: NavigationHistoryUIState
 }
 
@@ -31,6 +32,7 @@ const isNavigatingHistory = ref(false)
 
 const { selectedNote } = useNotes()
 const { selectedSnippet } = useSnippets()
+const { currentRequest } = useHttpRequests()
 
 const canGoBack = computed(() => cursor.value > 0)
 const canGoForward = computed(
@@ -90,6 +92,13 @@ function captureCurrentLocation(): NavigationHistoryEntry | undefined {
       type: 'snippet',
     }
   }
+  else if (routeName === RouterName.httpSpace && currentRequest.value) {
+    entry = {
+      id: currentRequest.value.id,
+      name: currentRequest.value.name,
+      type: 'http-request',
+    }
+  }
 
   if (!entry) {
     return
diff --git a/src/renderer/ipc/listeners/__tests__/deepLinks.test.ts b/src/renderer/ipc/listeners/__tests__/deepLinks.test.ts
index 659fe01c..b14f8925 100644
--- a/src/renderer/ipc/listeners/__tests__/deepLinks.test.ts
+++ b/src/renderer/ipc/listeners/__tests__/deepLinks.test.ts
@@ -2,6 +2,8 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { computed, ref } from 'vue'
 
 interface SetupOptions {
+  httpRequestResponse?: any
+  httpRequestThrows?: boolean
   noteResponse?: any
   noteRouteName?: string
   noteThrows?: boolean
@@ -29,6 +31,11 @@ async function setup(options: SetupOptions = {}) {
   const clearFolderSelection = vi.fn()
   const getSnippets = vi.fn(async () => undefined)
   const selectSnippet = vi.fn()
+  const getHttpFolders = vi.fn(async () => undefined)
+  const selectHttpFolder = vi.fn(async () => undefined)
+  const clearHttpFolderSelection = vi.fn()
+  const getHttpRequests = vi.fn(async () => undefined)
+  const selectHttpRequest = vi.fn()
 
   const getNoteFolders = vi.fn(async () => undefined)
   const selectNoteFolder = vi.fn(async () => undefined)
@@ -76,6 +83,20 @@ async function setup(options: SetupOptions = {}) {
         },
       }))
 
+  const getHttpRequestsById = options.httpRequestThrows
+    ? vi.fn(async () => {
+        throw new Error('not found')
+      })
+    : vi.fn(async () => ({
+        data: options.httpRequestResponse ?? {
+          folderId: 4,
+          id: 8,
+          method: 'GET',
+          name: 'HTTP request',
+          url: 'https://example.com',
+        },
+      }))
+
   const router = {
     currentRoute: ref({
       name: options.noteRouteName ?? options.snippetRouteName ?? 'main',
@@ -87,8 +108,10 @@ async function setup(options: SetupOptions = {}) {
 
   const initCodeSpace = vi.fn(async () => undefined)
   const initNotesSpace = vi.fn(async () => undefined)
+  const initHttpSpace = vi.fn(async () => undefined)
   const isAppLoading = ref(false)
   const isCodeSpaceInitialized = ref(false)
+  const isHttpSpaceInitialized = ref(false)
   const isNotesSpaceInitialized = ref(false)
   const pendingCodeNavigation = ref(false)
   const pendingNotesNavigation = ref(false)
@@ -111,6 +134,24 @@ async function setup(options: SetupOptions = {}) {
       getFolders,
       selectFolder,
     }),
+    useHttpApp: () => ({
+      focusedRequestId: ref<number | undefined>(),
+      highlightedFolderIds: ref(new Set<number>()),
+      highlightedRequestIds: ref(new Set<number>()),
+      isHttpSpaceInitialized,
+    }),
+    useHttpFolders: () => ({
+      clearFolderSelection: clearHttpFolderSelection,
+      getHttpFolders,
+      selectHttpFolder,
+    }),
+    useHttpRequests: () => ({
+      getHttpRequests,
+      selectHttpRequest,
+    }),
+    useHttpSpaceInit: () => ({
+      initHttpSpace,
+    }),
     useNoteFolders: () => ({
       clearFolderSelection: clearNoteFolderSelection,
       getNoteFolders,
@@ -169,12 +210,16 @@ async function setup(options: SetupOptions = {}) {
       snippets: {
         getSnippetsById,
       },
+      httpRequests: {
+        getHttpRequestsById,
+      },
     },
   }))
 
   vi.doMock('@/router', () => ({
     RouterName: {
       main: 'main',
+      httpSpace: 'http-space',
       notesGraph: 'notes-space/graph',
       notesSpace: 'notes-space',
       notesPresentation: 'notes-space/presentation',
@@ -186,17 +231,22 @@ async function setup(options: SetupOptions = {}) {
 
   return {
     clearFolderSelection,
+    clearHttpFolderSelection,
     clearNoteFolderSelection,
     clearNotesState,
     getFolders,
+    getHttpFolders,
+    getHttpRequests,
     getNotes,
     getSnippets,
     goBack,
     goForward,
     initCodeSpace,
+    initHttpSpace,
     initNotesSpace,
     isAppLoading,
     isCodeSpaceInitialized,
+    isHttpSpaceInitialized,
     isNotesSpaceInitialized,
     isNavigatingHistory,
     historyCursor,
@@ -209,6 +259,8 @@ async function setup(options: SetupOptions = {}) {
     recordNavigation,
     router,
     selectFolder,
+    selectHttpFolder,
+    selectHttpRequest,
     selectNote,
     selectNoteFolder,
     selectSnippet,
@@ -264,6 +316,46 @@ describe('deepLinks', () => {
     expect(context.pendingNotesNavigation.value).toBe(false)
   })
 
+  it('opens HTTP request links in the request folder context', async () => {
+    const context = await setup({
+      httpRequestResponse: {
+        folderId: 4,
+        id: 8,
+        method: 'POST',
+        name: 'Create snippet',
+        url: 'https://example.com/snippets',
+      },
+      snippetRouteName: 'notes-space',
+    })
+
+    await context.module.openHttpRequestDeepLink(8)
+
+    expect(context.router.push).toHaveBeenCalledWith({ name: 'http-space' })
+    expect(context.getHttpRequests).toHaveBeenCalledTimes(1)
+    expect(context.getHttpFolders).toHaveBeenCalledTimes(1)
+    expect(context.selectHttpFolder).toHaveBeenCalledWith(4)
+    expect(context.selectHttpRequest).toHaveBeenCalledWith(8)
+    expect(context.isHttpSpaceInitialized.value).toBe(true)
+  })
+
+  it('opens root HTTP request links without a folder selection', async () => {
+    const context = await setup({
+      httpRequestResponse: {
+        folderId: null,
+        id: 8,
+        method: 'GET',
+        name: 'List snippets',
+        url: 'https://example.com/snippets',
+      },
+    })
+
+    await context.module.openHttpRequestDeepLink(8)
+
+    expect(context.clearHttpFolderSelection).toHaveBeenCalledTimes(1)
+    expect(context.selectHttpFolder).not.toHaveBeenCalled()
+    expect(context.selectHttpRequest).toHaveBeenCalledWith(8)
+  })
+
   it('falls back to legacy folderId for old snippet deeplinks', async () => {
     const context = await setup({
       snippetThrows: true,
@@ -289,6 +381,17 @@ describe('deepLinks', () => {
     expect(context.selectSnippet).toHaveBeenCalledWith(42)
   })
 
+  it('records history when opening an internal HTTP request target', async () => {
+    const context = await setup({
+      snippetRouteName: 'notes-space',
+    })
+
+    await context.module.openInternalTarget({ id: 8, type: 'http-request' })
+
+    expect(context.recordNavigation).toHaveBeenCalledTimes(1)
+    expect(context.selectHttpRequest).toHaveBeenCalledWith(8)
+  })
+
   it('restores target from history on back navigation', async () => {
     const context = await setup({
       snippetRouteName: 'main',
diff --git a/src/renderer/ipc/listeners/__tests__/main-menu.test.ts b/src/renderer/ipc/listeners/__tests__/main-menu.test.ts
index 1f4527ff..7ad206ff 100644
--- a/src/renderer/ipc/listeners/__tests__/main-menu.test.ts
+++ b/src/renderer/ipc/listeners/__tests__/main-menu.test.ts
@@ -9,6 +9,11 @@ async function setup() {
   const ipcHandlers = new Map<string, (...args: any[]) => void>()
   const navigateBack = vi.fn(async () => undefined)
   const navigateForward = vi.fn(async () => undefined)
+  const executeCurrentRequest = vi.fn(async () => undefined)
+  const saveCurrentRequest = vi.fn(async () => undefined)
+  const currentDraft = ref({ url: 'https://example.com' })
+  const isExecuting = ref(false)
+  const getActiveSpaceId = vi.fn(() => 'code')
 
   vi.doMock('@/composables', () => ({
     useApp: () => ({
@@ -46,6 +51,18 @@ async function setup() {
       showNotesPresentation: vi.fn(),
       toggleNotesSidebar: vi.fn(),
     }),
+    useHttpApp: () => ({
+      setHttpLayoutMode: vi.fn(),
+      toggleHttpSidebar: vi.fn(),
+    }),
+    useHttpExecute: () => ({
+      executeCurrentRequest,
+      isExecuting,
+    }),
+    useHttpRequests: () => ({
+      currentDraft,
+      saveCurrentRequest,
+    }),
     useNotesEditor: () => ({
       settings: { fontSize: 14 },
     }),
@@ -79,7 +96,7 @@ async function setup() {
   }))
 
   vi.doMock('@/spaceDefinitions', () => ({
-    getActiveSpaceId: vi.fn(() => 'code'),
+    getActiveSpaceId,
   }))
 
   vi.doMock('~/main/store/constants', () => ({
@@ -97,8 +114,13 @@ async function setup() {
 
   return {
     ipcHandlers,
+    currentDraft,
+    executeCurrentRequest,
+    getActiveSpaceId,
+    isExecuting,
     navigateBack,
     navigateForward,
+    saveCurrentRequest,
   }
 }
 
@@ -116,4 +138,23 @@ describe('registerMainMenuListeners', () => {
     expect(context.navigateBack).toHaveBeenCalledTimes(1)
     expect(context.navigateForward).toHaveBeenCalledTimes(1)
   })
+
+  it('saves and sends the current http request from the menu shortcut', async () => {
+    const context = await setup()
+    context.getActiveSpaceId.mockReturnValue('http')
+
+    await context.ipcHandlers.get('main-menu:send-http-request')?.()
+
+    expect(context.saveCurrentRequest).toHaveBeenCalledTimes(1)
+    expect(context.executeCurrentRequest).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores send request outside http space', async () => {
+    const context = await setup()
+
+    await context.ipcHandlers.get('main-menu:send-http-request')?.()
+
+    expect(context.saveCurrentRequest).not.toHaveBeenCalled()
+    expect(context.executeCurrentRequest).not.toHaveBeenCalled()
+  })
 })
diff --git a/src/renderer/ipc/listeners/__tests__/system.test.ts b/src/renderer/ipc/listeners/__tests__/system.test.ts
index dc4ac3e2..0eb8d696 100644
--- a/src/renderer/ipc/listeners/__tests__/system.test.ts
+++ b/src/renderer/ipc/listeners/__tests__/system.test.ts
@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-async function setup(activeSpace: 'code' | 'notes' | 'tools' | null) {
+async function setup(activeSpace: 'code' | 'notes' | 'http' | 'tools' | null) {
   vi.resetModules()
   vi.useFakeTimers()
 
@@ -11,6 +11,7 @@ async function setup(activeSpace: 'code' | 'notes' | 'tools' | null) {
   }
   const isCodeSpaceInitialized = ref(true)
   const isNotesSpaceInitialized = ref(true)
+  const isHttpSpaceInitialized = ref(true)
   const displayedSnippets = ref<{ id: number }[]>([])
   const getTags = vi.fn(async () => undefined)
   const normalizeCodeSelectionState = vi.fn(async () => undefined)
@@ -21,6 +22,7 @@ async function setup(activeSpace: 'code' | 'notes' | 'tools' | null) {
   const getNotes = vi.fn(async () => undefined)
   const getNoteTags = vi.fn(async () => undefined)
   const normalizeNotesSelectionState = vi.fn(async () => undefined)
+  const refreshHttpSpaceFromDisk = vi.fn(async () => undefined)
 
   vi.doMock('@/composables', () => ({
     initCodeSpace: vi.fn(async () => undefined),
@@ -57,6 +59,12 @@ async function setup(activeSpace: 'code' | 'notes' | 'tools' | null) {
     useMathNotebook: () => ({
       reloadFromDisk: reloadMathFromDisk,
     }),
+    useHttpSpaceInit: () => ({
+      refreshHttpSpaceFromDisk,
+    }),
+    useHttpApp: () => ({
+      isHttpSpaceInitialized,
+    }),
     useNoteFolders: () => ({
       getNoteFolders,
     }),
@@ -131,6 +139,10 @@ async function setup(activeSpace: 'code' | 'notes' | 'tools' | null) {
     getActiveSpaceId: vi.fn(() => activeSpace),
   }))
 
+  vi.doMock('../deepLinks', () => ({
+    handleDeepLink: vi.fn(async () => undefined),
+  }))
+
   const { registerSystemListeners } = await import('../system')
 
   registerSystemListeners()
@@ -142,8 +154,10 @@ async function setup(activeSpace: 'code' | 'notes' | 'tools' | null) {
     getNotes,
     getNoteTags,
     getSnippets,
+    refreshHttpSpaceFromDisk,
     ipcHandlers,
     isCodeSpaceInitialized,
+    isHttpSpaceInitialized,
     isNotesSpaceInitialized,
     normalizeCodeSelectionState,
     normalizeNotesSelectionState,
@@ -159,7 +173,7 @@ afterEach(() => {
 })
 
 describe('registerSystemListeners', () => {
-  it('invalidates code and notes initialization after storage sync', async () => {
+  it('invalidates space initialization after storage sync', async () => {
     const context = await setup('tools')
 
     context.ipcHandlers.get('system:storage-synced')?.(undefined)
@@ -167,6 +181,7 @@ describe('registerSystemListeners', () => {
 
     expect(context.isCodeSpaceInitialized.value).toBe(false)
     expect(context.isNotesSpaceInitialized.value).toBe(false)
+    expect(context.isHttpSpaceInitialized.value).toBe(false)
     expect(context.getFolders).not.toHaveBeenCalled()
     expect(context.getSnippets).not.toHaveBeenCalled()
     expect(context.getNoteFolders).not.toHaveBeenCalled()
@@ -197,4 +212,16 @@ describe('registerSystemListeners', () => {
     expect(context.normalizeNotesSelectionState).toHaveBeenCalledTimes(1)
     expect(context.getNotes).not.toHaveBeenCalled()
   })
+
+  it('refreshes http space from disk', async () => {
+    const context = await setup('http')
+
+    context.ipcHandlers.get('system:storage-synced')?.(undefined)
+    await vi.advanceTimersByTimeAsync(300)
+
+    expect(context.refreshHttpSpaceFromDisk).toHaveBeenCalledTimes(1)
+    expect(context.isHttpSpaceInitialized.value).toBe(false)
+    expect(context.getFolders).not.toHaveBeenCalled()
+    expect(context.getNoteFolders).not.toHaveBeenCalled()
+  })
 })
diff --git a/src/renderer/ipc/listeners/deepLinks.ts b/src/renderer/ipc/listeners/deepLinks.ts
index aff7cf80..29157777 100644
--- a/src/renderer/ipc/listeners/deepLinks.ts
+++ b/src/renderer/ipc/listeners/deepLinks.ts
@@ -4,6 +4,10 @@ import {
   queueNavigationUIStateRestore,
   useApp,
   useFolders,
+  useHttpApp,
+  useHttpFolders,
+  useHttpRequests,
+  useHttpSpaceInit,
   useNavigationHistory,
   useNoteFolders,
   useNotes,
@@ -16,7 +20,7 @@ import { router, RouterName } from '@/router'
 import { api } from '@/services/api'
 
 interface InternalTarget {
-  type: 'snippet' | 'note'
+  type: 'snippet' | 'note' | 'http-request'
   id: number
 }
 
@@ -38,9 +42,22 @@ const {
   notesState,
   pendingNotesNavigation,
 } = useNotesApp()
+const {
+  focusedRequestId,
+  highlightedFolderIds: highlightedHttpFolderIds,
+  highlightedRequestIds,
+  isHttpSpaceInitialized,
+} = useHttpApp()
 
 const { clearFolderSelection, getFolders, selectFolder } = useFolders()
 const { getSnippets, selectSnippet } = useSnippets()
+const {
+  clearFolderSelection: clearHttpFolderSelection,
+  getHttpFolders,
+  selectHttpFolder,
+} = useHttpFolders()
+const { getHttpRequests, selectHttpRequest } = useHttpRequests()
+const { initHttpSpace } = useHttpSpaceInit()
 const {
   clearFolderSelection: clearNoteFolderSelection,
   getNoteFolders,
@@ -64,6 +81,12 @@ function clearNotesNavigationState() {
   focusedNoteId.value = undefined
 }
 
+function clearHttpNavigationState() {
+  highlightedHttpFolderIds.value.clear()
+  highlightedRequestIds.value.clear()
+  focusedRequestId.value = undefined
+}
+
 async function ensureCodeRoute() {
   if (router.currentRoute.value.name !== RouterName.main) {
     await router.push({ name: RouterName.main })
@@ -76,6 +99,12 @@ async function ensureNotesRoute() {
   }
 }
 
+async function ensureHttpRoute() {
+  if (router.currentRoute.value.name !== RouterName.httpSpace) {
+    await router.push({ name: RouterName.httpSpace })
+  }
+}
+
 export async function openSnippetDeepLink(
   snippetId: number,
   legacyFolderId?: number,
@@ -175,6 +204,36 @@ export async function openNoteDeepLink(noteId: number): Promise<void> {
   }
 }
 
+export async function openHttpRequestDeepLink(
+  requestId: number,
+): Promise<void> {
+  clearHttpNavigationState()
+  await ensureHttpRoute()
+
+  try {
+    const { data: request } = await api.httpRequests.getHttpRequestsById(
+      String(requestId),
+    )
+
+    await getHttpRequests()
+
+    if (request.folderId !== null) {
+      await getHttpFolders()
+      await selectHttpFolder(request.folderId)
+    }
+    else {
+      clearHttpFolderSelection()
+    }
+
+    selectHttpRequest(requestId)
+    isHttpSpaceInitialized.value = true
+  }
+  catch (error) {
+    console.error('Failed to open HTTP request deep link:', error)
+    await initHttpSpace()
+  }
+}
+
 export async function openInternalTarget(
   target: InternalTarget,
 ): Promise<void> {
@@ -184,6 +243,11 @@ export async function openInternalTarget(
       return
     }
 
+    if (target.type === 'http-request') {
+      await openHttpRequestDeepLink(target.id)
+      return
+    }
+
     await openNoteDeepLink(target.id)
     return
   }
@@ -194,6 +258,11 @@ export async function openInternalTarget(
       return
     }
 
+    if (target.type === 'http-request') {
+      await openHttpRequestDeepLink(target.id)
+      return
+    }
+
     await openNoteDeepLink(target.id)
   })
 }
@@ -216,6 +285,11 @@ async function restoreNavigationTarget(
       return
     }
 
+    if (target.type === 'http-request') {
+      await openHttpRequestDeepLink(target.id)
+      return
+    }
+
     await openNoteDeepLink(target.id)
   }
   finally {
@@ -247,6 +321,7 @@ export async function handleDeepLink(url: string): Promise<void> {
   const parsed = new URL(url)
   const snippetId = parsed.searchParams.get('snippetId')
   const noteId = parsed.searchParams.get('noteId')
+  const httpRequestId = parsed.searchParams.get('httpRequestId')
   const legacyFolderId = parsed.searchParams.get('folderId')
 
   if (snippetId) {
@@ -263,5 +338,12 @@ export async function handleDeepLink(url: string): Promise<void> {
     await recordNavigation(async () => {
       await openNoteDeepLink(Number(noteId))
     })
+    return
+  }
+
+  if (httpRequestId) {
+    await recordNavigation(async () => {
+      await openHttpRequestDeepLink(Number(httpRequestId))
+    })
   }
 }
diff --git a/src/renderer/ipc/listeners/main-menu.ts b/src/renderer/ipc/listeners/main-menu.ts
index 8d3f4842..72d2b8b6 100644
--- a/src/renderer/ipc/listeners/main-menu.ts
+++ b/src/renderer/ipc/listeners/main-menu.ts
@@ -4,6 +4,9 @@ import {
   useApp,
   useEditor,
   useFolders,
+  useHttpApp,
+  useHttpExecute,
+  useHttpRequests,
   useMathNotebook,
   useNoteFolders,
   useNotes,
@@ -42,6 +45,9 @@ const {
   showNotesPresentation,
   toggleNotesSidebar,
 } = useNotesApp()
+const { setHttpLayoutMode, toggleHttpSidebar } = useHttpApp()
+const { executeCurrentRequest, isExecuting } = useHttpExecute()
+const { currentDraft, saveCurrentRequest } = useHttpRequests()
 
 export function registerMainMenuListeners() {
   registerMainMenuContextSync()
@@ -132,6 +138,11 @@ export function registerMainMenuListeners() {
 
     if (activeSpaceId === 'notes') {
       toggleNotesSidebar()
+      return
+    }
+
+    if (activeSpaceId === 'http') {
+      toggleHttpSidebar()
     }
   })
 
@@ -165,6 +176,11 @@ export function registerMainMenuListeners() {
 
     if (activeSpaceId === 'notes') {
       setNotesLayoutMode(layoutMode)
+      return
+    }
+
+    if (activeSpaceId === 'http') {
+      setHttpLayoutMode(layoutMode)
     }
   })
 
@@ -176,6 +192,19 @@ export function registerMainMenuListeners() {
     notesEditorMode.value = mode
   })
 
+  ipc.on('main-menu:send-http-request', async () => {
+    if (
+      getActiveSpaceId() !== 'http'
+      || !currentDraft.value?.url
+      || isExecuting.value
+    ) {
+      return
+    }
+
+    await saveCurrentRequest()
+    await executeCurrentRequest()
+  })
+
   ipc.on('main-menu:font-size-increase', () => {
     if (getActiveSpaceId() === 'notes') {
       notesEditorSettings.fontSize++
diff --git a/src/renderer/ipc/listeners/system.ts b/src/renderer/ipc/listeners/system.ts
index 8fb83fba..ff458ad9 100644
--- a/src/renderer/ipc/listeners/system.ts
+++ b/src/renderer/ipc/listeners/system.ts
@@ -3,6 +3,8 @@ import {
   normalizeNotesSelectionState,
   useApp,
   useFolders,
+  useHttpApp,
+  useHttpSpaceInit,
   useMathNotebook,
   useNoteFolders,
   useNotes,
@@ -23,12 +25,14 @@ import { repository } from '../../../../package.json'
 import { handleDeepLink } from './deepLinks'
 
 const { state, isCodeSpaceInitialized } = useApp()
+const { isHttpSpaceInitialized } = useHttpApp()
 const { getFolders } = useFolders()
 const { getTags } = useTags()
 const { selectFirstSnippet, displayedSnippets } = useSnippets()
 const { hasBusyContentUpdates } = useSnippetUpdate()
 const { shouldSkipStorageSyncRefresh } = useStorageMutation()
 const { reloadFromDisk: reloadMathFromDisk } = useMathNotebook()
+const { refreshHttpSpaceFromDisk } = useHttpSpaceInit()
 const { isNotesSpaceInitialized } = useNotesApp()
 const { getNoteFolders } = useNoteFolders()
 const { hasBusyNoteContentUpdates } = useNotes()
@@ -62,6 +66,7 @@ async function refreshAfterStorageSync() {
   const activeSpace = getActiveSpaceId()
   isCodeSpaceInitialized.value = false
   isNotesSpaceInitialized.value = false
+  isHttpSpaceInitialized.value = false
 
   switch (activeSpace) {
     case 'math':
@@ -80,6 +85,9 @@ async function refreshAfterStorageSync() {
         await getNotesGraph()
       }
       break
+    case 'http':
+      await refreshHttpSpaceFromDisk()
+      break
     case 'tools':
       break
     case 'code':
diff --git a/src/renderer/ipc/main-menu/__tests__/context.test.ts b/src/renderer/ipc/main-menu/__tests__/context.test.ts
index 99d5ee81..97bb8d7e 100644
--- a/src/renderer/ipc/main-menu/__tests__/context.test.ts
+++ b/src/renderer/ipc/main-menu/__tests__/context.test.ts
@@ -20,6 +20,10 @@ describe('createMainMenuContext', () => {
         layoutMode: 'all-panels',
         mode: 'livePreview',
       },
+      http: {
+        layoutMode: 'all-panels',
+        canSendRequest: false,
+      },
     })
 
     expect(context.file).toEqual({
@@ -39,6 +43,7 @@ describe('createMainMenuContext', () => {
     })
     expect(context.editor).toEqual({
       canAdjustFontSize: true,
+      canSendRequest: false,
       canFormat: true,
       canPreviewCode: true,
       canPreviewJson: true,
@@ -67,6 +72,10 @@ describe('createMainMenuContext', () => {
         layoutMode: 'editor-only',
         mode: 'preview',
       },
+      http: {
+        layoutMode: 'all-panels',
+        canSendRequest: false,
+      },
     })
 
     expect(context.file).toEqual({
@@ -86,6 +95,7 @@ describe('createMainMenuContext', () => {
     })
     expect(context.editor).toEqual({
       canAdjustFontSize: true,
+      canSendRequest: false,
       canFormat: false,
       canPreviewCode: false,
       canPreviewJson: false,
@@ -114,6 +124,10 @@ describe('createMainMenuContext', () => {
         layoutMode: 'all-panels',
         mode: 'livePreview',
       },
+      http: {
+        layoutMode: 'all-panels',
+        canSendRequest: false,
+      },
     })
 
     expect(context.file).toEqual({
@@ -133,6 +147,7 @@ describe('createMainMenuContext', () => {
     })
     expect(context.editor).toEqual({
       canAdjustFontSize: false,
+      canSendRequest: false,
       canFormat: false,
       canPreviewCode: false,
       canPreviewJson: false,
@@ -143,6 +158,58 @@ describe('createMainMenuContext', () => {
     })
   })
 
+  it('builds http-space menu context with layout-only view actions', () => {
+    const context = createMainMenuContext({
+      activeSpaceId: 'http',
+      compactListMode: false,
+      code: {
+        canPreviewCode: false,
+        canPreviewJson: false,
+        isCodePreviewShown: false,
+        isJsonPreviewShown: false,
+        layoutMode: 'all-panels',
+      },
+      notes: {
+        hasSelectedNote: false,
+        isMindmapShown: false,
+        isPresentationShown: false,
+        layoutMode: 'all-panels',
+        mode: 'livePreview',
+      },
+      http: {
+        layoutMode: 'list-editor',
+        canSendRequest: true,
+      },
+    })
+
+    expect(context.file).toEqual({
+      canCreateFragment: false,
+      primaryAction: null,
+      secondaryAction: null,
+    })
+    expect(context.view).toEqual({
+      canToggleCompactMode: false,
+      canToggleMindmap: false,
+      canTogglePresentation: false,
+      isCompactMode: false,
+      isMindmapShown: false,
+      isPresentationShown: false,
+      layoutMode: 'list-editor',
+      layoutModes: ['all-panels', 'list-editor', 'editor-only'],
+    })
+    expect(context.editor).toEqual({
+      canAdjustFontSize: false,
+      canSendRequest: true,
+      canFormat: false,
+      canPreviewCode: false,
+      canPreviewJson: false,
+      isCodePreviewShown: false,
+      isJsonPreviewShown: false,
+      kind: 'http',
+      noteMode: null,
+    })
+  })
+
   it('disables compact mode for spaces without a list', () => {
     const context = createMainMenuContext({
       activeSpaceId: 'tools',
@@ -161,6 +228,10 @@ describe('createMainMenuContext', () => {
         layoutMode: 'all-panels',
         mode: 'livePreview',
       },
+      http: {
+        layoutMode: 'all-panels',
+        canSendRequest: false,
+      },
     })
 
     expect(context.view).toEqual({
diff --git a/src/renderer/ipc/main-menu/context.ts b/src/renderer/ipc/main-menu/context.ts
index 0869b71c..c47bc222 100644
--- a/src/renderer/ipc/main-menu/context.ts
+++ b/src/renderer/ipc/main-menu/context.ts
@@ -19,11 +19,17 @@ interface NotesMenuState {
   mode: NotesEditorMode
 }
 
+interface HttpMenuState {
+  layoutMode: LayoutMode
+  canSendRequest: boolean
+}
+
 interface CreateMainMenuContextOptions {
   activeSpaceId: SpaceId | null
   compactListMode: boolean
   code: CodeMenuState
   notes: NotesMenuState
+  http: HttpMenuState
 }
 
 const sharedLayoutModes: MainMenuLayoutMode[] = [
@@ -55,6 +61,7 @@ export function createMainMenuContext(
       editor: {
         kind: 'code',
         noteMode: null,
+        canSendRequest: false,
         canFormat: true,
         canPreviewCode: options.code.canPreviewCode,
         isCodePreviewShown: options.code.isCodePreviewShown,
@@ -85,6 +92,7 @@ export function createMainMenuContext(
       editor: {
         kind: 'notes',
         noteMode: options.notes.mode,
+        canSendRequest: false,
         canFormat: false,
         canPreviewCode: false,
         isCodePreviewShown: false,
@@ -95,6 +103,37 @@ export function createMainMenuContext(
     }
   }
 
+  if (options.activeSpaceId === 'http') {
+    return {
+      file: {
+        primaryAction: null,
+        secondaryAction: null,
+        canCreateFragment: false,
+      },
+      view: {
+        layoutMode: options.http.layoutMode,
+        layoutModes: sharedLayoutModes,
+        canToggleCompactMode: false,
+        canToggleMindmap: false,
+        isCompactMode: false,
+        isMindmapShown: false,
+        canTogglePresentation: false,
+        isPresentationShown: false,
+      },
+      editor: {
+        kind: 'http',
+        noteMode: null,
+        canSendRequest: options.http.canSendRequest,
+        canFormat: false,
+        canPreviewCode: false,
+        isCodePreviewShown: false,
+        canPreviewJson: false,
+        isJsonPreviewShown: false,
+        canAdjustFontSize: false,
+      },
+    }
+  }
+
   if (options.activeSpaceId === 'math') {
     return {
       file: {
@@ -115,6 +154,7 @@ export function createMainMenuContext(
       editor: {
         kind: null,
         noteMode: null,
+        canSendRequest: false,
         canFormat: false,
         canPreviewCode: false,
         isCodePreviewShown: false,
@@ -144,6 +184,7 @@ export function createMainMenuContext(
     editor: {
       kind: null,
       noteMode: null,
+      canSendRequest: false,
       canFormat: false,
       canPreviewCode: false,
       isCodePreviewShown: false,
diff --git a/src/renderer/ipc/main-menu/sync.ts b/src/renderer/ipc/main-menu/sync.ts
index bf30c02c..abb5adc6 100644
--- a/src/renderer/ipc/main-menu/sync.ts
+++ b/src/renderer/ipc/main-menu/sync.ts
@@ -1,4 +1,12 @@
-import { useApp, useNotes, useNotesApp, useSnippets } from '@/composables'
+import {
+  useApp,
+  useHttpApp,
+  useHttpExecute,
+  useHttpRequests,
+  useNotes,
+  useNotesApp,
+  useSnippets,
+} from '@/composables'
 import { ipc } from '@/electron'
 import { getActiveSpaceId } from '@/spaceDefinitions'
 import { createMainMenuContext } from './context'
@@ -16,6 +24,9 @@ const {
   notesEditorMode,
   notesLayoutMode,
 } = useNotesApp()
+const { httpLayoutMode } = useHttpApp()
+const { isExecuting } = useHttpExecute()
+const { currentDraft } = useHttpRequests()
 const { isAvailableToCodePreview, selectedSnippetContent } = useSnippets()
 
 export function registerMainMenuContextSync() {
@@ -34,6 +45,9 @@ export function registerMainMenuContextSync() {
         isNotesPresentationShown.value,
         notesLayoutMode.value,
         notesEditorMode.value,
+        httpLayoutMode.value,
+        currentDraft.value?.url,
+        isExecuting.value,
       ] as const,
     () => {
       ipc.send(
@@ -55,6 +69,11 @@ export function registerMainMenuContextSync() {
             layoutMode: notesLayoutMode.value,
             mode: notesEditorMode.value,
           },
+          http: {
+            layoutMode: httpLayoutMode.value,
+            canSendRequest:
+              Boolean(currentDraft.value?.url) && !isExecuting.value,
+          },
         }),
       )
     },
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 14def757..86fc8ece 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -9,6 +9,7 @@ export const RouterName = {
   preferencesEditor: 'preferences/editor',
   preferencesNotesEditor: 'preferences/notes-editor',
   preferencesMath: 'preferences/math',
+  preferencesHttp: 'preferences/http',
   preferencesAPI: 'preferences/api',
   devtools: 'devtools',
   devtoolsCaseConverter: 'devtools/case-converter',
@@ -30,6 +31,7 @@ export const RouterName = {
   devtoolsLoremIpsumGenerator: 'devtools/lorem-ipsum-generator',
   devtoolsJsonDiff: 'devtools/json-diff',
   mathNotebook: 'math-notebook',
+  httpSpace: 'http-space',
   notesSpace: 'notes-space',
   notesDashboard: 'notes-space/dashboard',
   notesGraph: 'notes-space/graph',
@@ -81,6 +83,11 @@ const routes = [
         name: RouterName.preferencesMath,
         component: () => import('@/components/preferences/Math.vue'),
       },
+      {
+        path: 'http',
+        name: RouterName.preferencesHttp,
+        component: () => import('@/components/preferences/Http.vue'),
+      },
       {
         path: 'api',
         name: RouterName.preferencesAPI,
@@ -204,6 +211,11 @@ const routes = [
     name: RouterName.mathNotebook,
     component: () => import('@/views/MathNotebook.vue'),
   },
+  {
+    path: '/http',
+    name: RouterName.httpSpace,
+    component: () => import('@/views/HttpSpace.vue'),
+  },
   {
     path: '/notes',
     name: RouterName.notesSpace,
diff --git a/src/renderer/services/api/generated/index.ts b/src/renderer/services/api/generated/index.ts
index e454fc32..7d213c74 100644
--- a/src/renderer/services/api/generated/index.ts
+++ b/src/renderer/services/api/generated/index.ts
@@ -376,6 +376,222 @@ export interface NoteTagsUpdate {
   name: string;
 }
 
+export interface HttpFoldersAdd {
+  name: string;
+  icon?: string | null;
+  parentId?: number | null;
+}
+
+export type HttpFoldersResponse = {
+  id: number;
+  name: string;
+  icon: string | null;
+  createdAt: number;
+  updatedAt: number;
+  parentId: number | null;
+  isOpen: number;
+  orderIndex: number;
+}[];
+
+export type HttpFoldersTreeResponse = {
+  id: number;
+  name: string;
+  icon: string | null;
+  createdAt: number;
+  updatedAt: number;
+  parentId: number | null;
+  isOpen: number;
+  orderIndex: number;
+  children: any[];
+}[];
+
+export interface HttpFoldersUpdate {
+  name?: string;
+  icon?: string | null;
+  parentId?: number | null;
+  /**
+   * @min 0
+   * @max 1
+   */
+  isOpen?: number;
+  orderIndex?: number;
+}
+
+export interface HttpRequestItemResponse {
+  id: number;
+  name: string;
+  folderId: number | null;
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+  url: string;
+  headers: {
+    key: string;
+    value: string;
+    description?: string;
+    enabled?: boolean;
+  }[];
+  query: {
+    key: string;
+    value: string;
+    description?: string;
+    enabled?: boolean;
+  }[];
+  bodyType: "none" | "json" | "text" | "form-urlencoded" | "multipart";
+  body: string | null;
+  formData: {
+    key: string;
+    type: "text" | "file";
+    value: string;
+  }[];
+  auth: {
+    type: "none" | "bearer" | "basic";
+    token?: string;
+    username?: string;
+    password?: string;
+  };
+  description: string;
+  filePath: string;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface HttpRequestsAdd {
+  name: string;
+  folderId?: number | null;
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+  url?: string;
+}
+
+export interface HttpRequestsQuery {
+  search?: string;
+}
+
+export type HttpRequestsResponse = {
+  id: number;
+  name: string;
+  folderId: number | null;
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+  url: string;
+  headers: {
+    key: string;
+    value: string;
+    description?: string;
+    enabled?: boolean;
+  }[];
+  query: {
+    key: string;
+    value: string;
+    description?: string;
+    enabled?: boolean;
+  }[];
+  bodyType: "none" | "json" | "text" | "form-urlencoded" | "multipart";
+  body: string | null;
+  formData: {
+    key: string;
+    type: "text" | "file";
+    value: string;
+  }[];
+  auth: {
+    type: "none" | "bearer" | "basic";
+    token?: string;
+    username?: string;
+    password?: string;
+  };
+  description: string;
+  filePath: string;
+  createdAt: number;
+  updatedAt: number;
+}[];
+
+export interface HttpRequestsUpdate {
+  name?: string;
+  folderId?: number | null;
+  method?: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+  url?: string;
+  headers?: {
+    key: string;
+    value: string;
+    description?: string;
+    enabled?: boolean;
+  }[];
+  query?: {
+    key: string;
+    value: string;
+    description?: string;
+    enabled?: boolean;
+  }[];
+  bodyType?: "none" | "json" | "text" | "form-urlencoded" | "multipart";
+  body?: string | null;
+  formData?: {
+    key: string;
+    type: "text" | "file";
+    value: string;
+  }[];
+  auth?: {
+    type: "none" | "bearer" | "basic";
+    token?: string;
+    username?: string;
+    password?: string;
+  };
+  description?: string;
+}
+
+export interface HttpEnvironmentItemResponse {
+  id: number;
+  name: string;
+  variables: object;
+  createdAt: number;
+  updatedAt: number;
+}
+
+export interface HttpEnvironmentsAdd {
+  name: string;
+  variables?: object;
+}
+
+export interface HttpEnvironmentsResponse {
+  activeId: number | null;
+  items: {
+    id: number;
+    name: string;
+    variables: object;
+    createdAt: number;
+    updatedAt: number;
+  }[];
+}
+
+export interface HttpEnvironmentsSetActive {
+  id: number | null;
+}
+
+export interface HttpEnvironmentsUpdate {
+  name?: string;
+  variables?: object;
+}
+
+export interface HttpHistoryItemResponse {
+  id: number;
+  requestId: number | null;
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+  url: string;
+  status: number | null;
+  durationMs: number;
+  sizeBytes: number;
+  requestedAt: number;
+  error?: string;
+}
+
+export type HttpHistoryResponse = {
+  id: number;
+  requestId: number | null;
+  method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";
+  url: string;
+  status: number | null;
+  durationMs: number;
+  sizeBytes: number;
+  requestedAt: number;
+  error?: string;
+}[];
+
 export type QueryParamsType = Record<string | number, any>;
 export type ResponseFormat = keyof Omit<Body, "body" | "bodyUsed">;
 
@@ -622,7 +838,7 @@ export class HttpClient<SecurityDataType = unknown> {
 
 /**
  * @title massCode API
- * @version 5.0.0
+ * @version 5.2.0
  *
  * Development documentation
  */
@@ -1425,4 +1641,313 @@ export class Api<
         ...params,
       }),
   };
+  httpFolders = {
+    /**
+     * No description
+     *
+     * @tags HTTP Folders
+     * @name GetHttpFolders
+     * @request GET:/http-folders/
+     */
+    getHttpFolders: (params: RequestParams = {}) =>
+      this.request<HttpFoldersResponse, any>({
+        path: `/http-folders/`,
+        method: "GET",
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Folders
+     * @name PostHttpFolders
+     * @request POST:/http-folders/
+     */
+    postHttpFolders: (data: HttpFoldersAdd, params: RequestParams = {}) =>
+      this.request<
+        {
+          id: number | bigint;
+        },
+        any
+      >({
+        path: `/http-folders/`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Folders
+     * @name GetHttpFoldersTree
+     * @request GET:/http-folders/tree
+     */
+    getHttpFoldersTree: (params: RequestParams = {}) =>
+      this.request<HttpFoldersTreeResponse, any>({
+        path: `/http-folders/tree`,
+        method: "GET",
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Folders
+     * @name PatchHttpFoldersById
+     * @request PATCH:/http-folders/{id}
+     */
+    patchHttpFoldersById: (
+      id: string,
+      data: HttpFoldersUpdate,
+      params: RequestParams = {},
+    ) =>
+      this.request<void, any>({
+        path: `/http-folders/${id}`,
+        method: "PATCH",
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Folders
+     * @name DeleteHttpFoldersById
+     * @request DELETE:/http-folders/{id}
+     */
+    deleteHttpFoldersById: (id: string, params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/http-folders/${id}`,
+        method: "DELETE",
+        ...params,
+      }),
+  };
+  httpRequests = {
+    /**
+     * No description
+     *
+     * @tags HTTP Requests
+     * @name GetHttpRequests
+     * @request GET:/http-requests/
+     */
+    getHttpRequests: (
+      query?: {
+        search?: string;
+      },
+      params: RequestParams = {},
+    ) =>
+      this.request<HttpRequestsResponse, any>({
+        path: `/http-requests/`,
+        method: "GET",
+        query: query,
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Requests
+     * @name PostHttpRequests
+     * @request POST:/http-requests/
+     */
+    postHttpRequests: (data: HttpRequestsAdd, params: RequestParams = {}) =>
+      this.request<
+        {
+          id: number | bigint;
+        },
+        any
+      >({
+        path: `/http-requests/`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Requests
+     * @name GetHttpRequestsById
+     * @request GET:/http-requests/{id}
+     */
+    getHttpRequestsById: (id: string, params: RequestParams = {}) =>
+      this.request<
+        HttpRequestItemResponse,
+        {
+          message: string;
+        }
+      >({
+        path: `/http-requests/${id}`,
+        method: "GET",
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Requests
+     * @name PatchHttpRequestsById
+     * @request PATCH:/http-requests/{id}
+     */
+    patchHttpRequestsById: (
+      id: string,
+      data: HttpRequestsUpdate,
+      params: RequestParams = {},
+    ) =>
+      this.request<void, any>({
+        path: `/http-requests/${id}`,
+        method: "PATCH",
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Requests
+     * @name DeleteHttpRequestsById
+     * @request DELETE:/http-requests/{id}
+     */
+    deleteHttpRequestsById: (id: string, params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/http-requests/${id}`,
+        method: "DELETE",
+        ...params,
+      }),
+  };
+  httpEnvironments = {
+    /**
+     * No description
+     *
+     * @tags HTTP Environments
+     * @name GetHttpEnvironments
+     * @request GET:/http-environments/
+     */
+    getHttpEnvironments: (params: RequestParams = {}) =>
+      this.request<HttpEnvironmentsResponse, any>({
+        path: `/http-environments/`,
+        method: "GET",
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Environments
+     * @name PostHttpEnvironments
+     * @request POST:/http-environments/
+     */
+    postHttpEnvironments: (
+      data: HttpEnvironmentsAdd,
+      params: RequestParams = {},
+    ) =>
+      this.request<
+        {
+          id: number | bigint;
+        },
+        any
+      >({
+        path: `/http-environments/`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Environments
+     * @name PatchHttpEnvironmentsById
+     * @request PATCH:/http-environments/{id}
+     */
+    patchHttpEnvironmentsById: (
+      id: string,
+      data: HttpEnvironmentsUpdate,
+      params: RequestParams = {},
+    ) =>
+      this.request<void, any>({
+        path: `/http-environments/${id}`,
+        method: "PATCH",
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Environments
+     * @name DeleteHttpEnvironmentsById
+     * @request DELETE:/http-environments/{id}
+     */
+    deleteHttpEnvironmentsById: (id: string, params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/http-environments/${id}`,
+        method: "DELETE",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP Environments
+     * @name PostHttpEnvironmentsActive
+     * @request POST:/http-environments/active
+     */
+    postHttpEnvironmentsActive: (
+      data: HttpEnvironmentsSetActive,
+      params: RequestParams = {},
+    ) =>
+      this.request<void, any>({
+        path: `/http-environments/active`,
+        method: "POST",
+        body: data,
+        type: ContentType.Json,
+        ...params,
+      }),
+  };
+  httpHistory = {
+    /**
+     * No description
+     *
+     * @tags HTTP History
+     * @name GetHttpHistory
+     * @request GET:/http-history/
+     */
+    getHttpHistory: (params: RequestParams = {}) =>
+      this.request<HttpHistoryResponse, any>({
+        path: `/http-history/`,
+        method: "GET",
+        format: "json",
+        ...params,
+      }),
+
+    /**
+     * No description
+     *
+     * @tags HTTP History
+     * @name DeleteHttpHistory
+     * @request DELETE:/http-history/
+     */
+    deleteHttpHistory: (params: RequestParams = {}) =>
+      this.request<void, any>({
+        path: `/http-history/`,
+        method: "DELETE",
+        ...params,
+      }),
+  };
 }
diff --git a/src/renderer/spaceDefinitions.ts b/src/renderer/spaceDefinitions.ts
index 367bc517..5599a216 100644
--- a/src/renderer/spaceDefinitions.ts
+++ b/src/renderer/spaceDefinitions.ts
@@ -2,9 +2,9 @@ import type { Component } from 'vue'
 import type { RouteLocationRaw, RouteRecordName } from 'vue-router'
 import { i18n, store } from '@/electron'
 import { router, RouterName } from '@/router'
-import { Blocks, Calculator, Code2, Notebook } from 'lucide-vue-next'
+import { Blocks, Calculator, Code2, Notebook, Send } from 'lucide-vue-next'
 
-export type SpaceId = 'code' | 'tools' | 'math' | 'notes'
+export type SpaceId = 'code' | 'tools' | 'math' | 'notes' | 'http'
 
 export interface SpaceDefinition {
   id: SpaceId
@@ -58,6 +58,15 @@ export function getSpaceDefinitions(): SpaceDefinition[] {
       isActive: routeName =>
         isRouteNameInSpace(routeName, RouterName.notesSpace),
     },
+    {
+      id: 'http',
+      label: i18n.t('spaces.http.label'),
+      tooltip: i18n.t('spaces.http.tooltip'),
+      icon: Send,
+      to: { name: RouterName.httpSpace },
+      isActive: routeName =>
+        isRouteNameInSpace(routeName, RouterName.httpSpace),
+    },
     {
       id: 'math',
       label: i18n.t('spaces.math.label'),
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 2ccab52b..3232ba96 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -39,6 +39,8 @@
   --internal-link-bg-hover: oklch(from var(--primary) l c h / 0.18);
   --internal-link-border-hover: oklch(from var(--primary) l c h / 0.32);
   --internal-link-fg-hover: var(--primary);
+  --http-var-known-fg: var(--primary);
+  --http-var-known-bg: oklch(from var(--primary) l c h / 0.14);
   --diff-added-bg: oklch(0.9 0.07 150);
   --diff-removed-bg: oklch(0.91 0.06 25);
   --diff-modified-bg: oklch(0.93 0.08 90);
@@ -99,6 +101,8 @@
   --internal-link-bg-hover: oklch(from var(--primary) l c h / 0.64);
   --internal-link-border-hover: oklch(from var(--primary) l c h / 0.72);
   --internal-link-fg-hover: oklch(from var(--primary-foreground) l c h / 0.88);
+  --http-var-known-fg: oklch(0.6 0.11 260);
+  --http-var-known-bg: oklch(from var(--primary) l c h / 0.32);
   --diff-added-bg: oklch(0.34 0.06 155);
   --diff-removed-bg: oklch(0.35 0.05 25);
   --diff-modified-bg: oklch(0.38 0.06 90);
diff --git a/src/renderer/utils/entryNameValidationMessage.ts b/src/renderer/utils/entryNameValidationMessage.ts
index 229866eb..7a317540 100644
--- a/src/renderer/utils/entryNameValidationMessage.ts
+++ b/src/renderer/utils/entryNameValidationMessage.ts
@@ -5,12 +5,13 @@ import {
 
 type TranslateFn = (key: string, params?: Record<string, unknown>) => string
 
-export type EntryNameConflictKind = 'note' | 'snippet' | 'folder'
+export type EntryNameConflictKind = 'note' | 'snippet' | 'folder' | 'request'
 
 const CONFLICT_MESSAGE_KEYS: Record<EntryNameConflictKind, string> = {
   folder: 'messages:error.entryNameFolderConflict',
   note: 'messages:error.entryNameNoteConflict',
   snippet: 'messages:error.entryNameSnippetConflict',
+  request: 'messages:error.entryNameRequestConflict',
 }
 
 export function getEntryNameValidationMessage(
diff --git a/src/renderer/views/HttpSpace.vue b/src/renderer/views/HttpSpace.vue
new file mode 100644
index 00000000..c7d5fb4f
--- /dev/null
+++ b/src/renderer/views/HttpSpace.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useApp, useHttpApp, useHttpSpaceInit } from '@/composables'
+import { store } from '@/electron'
+
+const { isAppLoading } = useApp()
+const { initHttpSpace } = useHttpSpaceInit()
+const { isHttpSidebarHidden, isHttpListHidden } = useHttpApp()
+
+void initHttpSpace()
+
+const storedThreePanel = store.app.get('http.layout.threePanel') as
+  | number[]
+  | undefined
+
+const sidebarWidth
+  = storedThreePanel?.length === 2 ? storedThreePanel[0] : undefined
+const listWidth = (() => {
+  if (storedThreePanel?.length === 2)
+    return storedThreePanel[1]
+  const twoPanel = store.app.get('http.layout.twoPanel') as number | undefined
+  return twoPanel ?? undefined
+})()
+
+function onResizeEnd(sw: number, lw: number) {
+  store.app.set('http.layout.threePanel', [sw, lw])
+}
+
+function onTwoPanelResize(lw: number) {
+  store.app.set('http.layout.twoPanel', lw)
+}
+
+const isSidebarShown = computed(() => !isHttpSidebarHidden.value)
+const isListShown = computed(() => !isHttpListHidden.value)
+
+onMounted(() => {
+  isAppLoading.value = false
+})
+</script>
+
+<template>
+  <LayoutThreeColumn
+    :show-sidebar="isSidebarShown"
+    :show-list="isListShown"
+    :sidebar-width="sidebarWidth"
+    :list-width="listWidth"
+    @resize-end="onResizeEnd"
+    @two-panel-resize="onTwoPanelResize"
+  >
+    <template #sidebar>
+      <HttpSidebar />
+    </template>
+    <template #list>
+      <HttpRequestsList />
+    </template>
+    <template #editor>
+      <HttpRequestEditorPane />
+    </template>
+  </LayoutThreeColumn>
+</template>
diff --git a/src/renderer/views/Preferences.vue b/src/renderer/views/Preferences.vue
index 151cd20a..9b26fb5c 100644
--- a/src/renderer/views/Preferences.vue
+++ b/src/renderer/views/Preferences.vue
@@ -13,6 +13,7 @@ import {
   Notebook,
   Palette,
   Plug,
+  Send,
 } from 'lucide-vue-next'
 import { RouterLink, useRoute } from 'vue-router'
 
@@ -40,6 +41,11 @@ const nav: { label: string, name: string, icon: Component }[] = [
     name: RouterName.preferencesNotesEditor,
     icon: Notebook,
   },
+  {
+    label: i18n.t('preferences:http.label'),
+    name: RouterName.preferencesHttp,
+    icon: Send,
+  },
   {
     label: i18n.t('preferences:math.label'),
     name: RouterName.preferencesMath,
diff --git a/src/shared/httpVariables.ts b/src/shared/httpVariables.ts
new file mode 100644
index 00000000..e57c56b7
--- /dev/null
+++ b/src/shared/httpVariables.ts
@@ -0,0 +1,12 @@
+const HTTP_VARIABLE_PATTERN = /\{\{\s*([\w.-]+)\s*\}\}/g
+
+export function interpolateHttpVariables(
+  template: string,
+  variables: Record<string, string>,
+): string {
+  return template.replace(HTTP_VARIABLE_PATTERN, (match, key: string) => {
+    return Object.prototype.hasOwnProperty.call(variables, key)
+      ? variables[key]
+      : match
+  })
+}
diff --git a/src/shared/notes/__tests__/internalLinks.test.ts b/src/shared/notes/__tests__/internalLinks.test.ts
index 2b62a091..0fde59ea 100644
--- a/src/shared/notes/__tests__/internalLinks.test.ts
+++ b/src/shared/notes/__tests__/internalLinks.test.ts
@@ -115,6 +115,18 @@ describe('parseInternalLink', () => {
       target: 'snippet:57',
     })
   })
+
+  it('keeps HTTP request id metadata for stored internal link payloads', () => {
+    expect(parseInternalLink('[[http-request:8|Create snippet]]')).toEqual({
+      alias: 'Create snippet',
+      basename: 'http-request:8',
+      legacyTarget: { id: 8, type: 'http-request' },
+      label: 'Create snippet',
+      pathSegments: [],
+      raw: '[[http-request:8|Create snippet]]',
+      target: 'http-request:8',
+    })
+  })
 })
 
 describe('splitInternalLinkTarget', () => {
@@ -155,6 +167,10 @@ describe('splitInternalLinkTarget', () => {
       basename: 'note:42',
       pathSegments: [],
     })
+    expect(splitInternalLinkTarget('http-request:8')).toEqual({
+      basename: 'http-request:8',
+      pathSegments: [],
+    })
   })
 
   it('returns empty fields for trailing-slash-only targets', () => {
@@ -338,6 +354,18 @@ describe('resolveInternalLinkTargetByTitle', () => {
     })
   })
 
+  it('returns an HTTP request when there is no exact snippet or note title match', () => {
+    expect(
+      resolveInternalLinkTargetByTitle('Create snippet', [
+        { id: 57, name: 'Architecture Draft', type: 'snippet' },
+        { id: 8, name: 'Create snippet', type: 'http-request' },
+      ]),
+    ).toEqual({
+      id: 8,
+      type: 'http-request',
+    })
+  })
+
   it('does not use partial matches', () => {
     expect(
       resolveInternalLinkTargetByTitle('Architecture', [
@@ -357,6 +385,19 @@ describe('resolveInternalLinkTargetByTitle', () => {
     ).toEqual({ id: 2, type: 'note' })
   })
 
+  it('resolves a path-based target to the matching HTTP request in that folder', () => {
+    expect(
+      resolveInternalLinkTargetByTitle('API/Create snippet', [
+        {
+          folderPath: 'API',
+          id: 8,
+          name: 'Create snippet',
+          type: 'http-request',
+        },
+      ]),
+    ).toEqual({ id: 8, type: 'http-request' })
+  })
+
   it('resolves a nested path-based target', () => {
     expect(
       resolveInternalLinkTargetByTitle('Work/2026/Plans', [
diff --git a/src/shared/notes/internalLinks.ts b/src/shared/notes/internalLinks.ts
index 58c515a7..e8268dd7 100644
--- a/src/shared/notes/internalLinks.ts
+++ b/src/shared/notes/internalLinks.ts
@@ -1,4 +1,4 @@
-export type InternalLinkType = 'snippet' | 'note'
+export type InternalLinkType = 'snippet' | 'note' | 'http-request'
 
 export interface InternalLink {
   alias: string | null
@@ -27,7 +27,7 @@ export interface ResolveInternalLinkOptions {
 }
 
 const ESCAPABLE_LINK_CHARACTERS = new Set(['\\', '|', ']'])
-const LEGACY_TARGET_RE = /^(?:snippet|note):\d+$/
+const LEGACY_TARGET_RE = /^(?:snippet|note|http-request):\d+$/
 
 export function splitInternalLinkTarget(target: string): {
   basename: string
@@ -170,7 +170,7 @@ function parseLinkAt(text: string, from: number): InternalLinkMatch | null {
   }
 
   const raw = text.slice(from, to)
-  const legacyMatch = target.match(/^(snippet|note):(\d+)$/)
+  const legacyMatch = target.match(/^(snippet|note|http-request):(\d+)$/)
   const legacyTarget = legacyMatch
     ? {
         id: Number(legacyMatch[2]),
@@ -359,16 +359,16 @@ export function resolveInternalLinkTargetByTitle(
   if (pathSegments.length > 0) {
     const targetPathKey = buildPathLookupKey(pathSegments, basename)
 
-    const noteMatch = items.find(
+    const pathMatch = items.find(
       item =>
-        item.type === 'note'
+        (item.type === 'note' || item.type === 'http-request')
         && buildCandidatePathLookupKey(item) === targetPathKey,
     )
 
-    if (noteMatch) {
+    if (pathMatch) {
       return {
-        id: noteMatch.id,
-        type: 'note',
+        id: pathMatch.id,
+        type: pathMatch.type,
       }
     }
 
@@ -397,7 +397,18 @@ export function resolveInternalLinkTargetByTitle(
   )
 
   if (noteCandidates.length === 0) {
-    return null
+    const httpRequest = items.find(
+      item =>
+        item.type === 'http-request'
+        && normalizeInternalLinkLookupKey(item.name) === normalizedTitle,
+    )
+
+    return httpRequest
+      ? {
+          id: httpRequest.id,
+          type: httpRequest.type,
+        }
+      : null
   }
 
   if (noteCandidates.length === 1) {